参考:http://www.10tiao.com/html/558/201705/2650964601/1.html
Node 现在从版本 7.6 开始就支持 async/await 了。
简介:
Async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。
Async/await 实际上是建立在 promise 的基础上。它不能与普通回调或者 node 回调一起用。
Async/await 像 promise 一样,也是非阻塞的。
Async/await 让异步代码看起来、表现起来更像同步代码。这正是其威力所在。
语法:
假设函数 ajax 返回一个promise,而该promise的完成值是一些JSON对象。我们只想调用它,并输出该JSON,然后返回"done"。
如下是用 ajax 实现的代码:
var ajax=new Promise(function(resolve,reject){
$.ajax({
type:"post",
url:"list.php",
success:function(result){
/*
result = {
flag: true,
msg: '',
data: []
}
*/
if(result.flag){
resolve(data.data)//在异步操作成功时调用
}else{
reject(data.msg);//在异步操作失败时调用
}
}
});
});
如下是用 promise 实现的代码:
const makeRequest = () => ajax.then(data => {
console.log(data);
return "done";
})
makeRequest();
如下是用 async/await 实现的代码:
const makeRequest = async () => {
console.log(await ajax);
return 'done';
}
区别:
函数前面有一个关键字
async
。await
关键字只用在用async
定义的函数内。所有async
函数都会隐式返回一个 promise,而 promise 的完成值将是函数的返回值(本例中是"done"
)。不能在代码的顶层用
await
,因为这样就不是在async
函数内。
// await makeRequest() 这段代码在顶层不能执行
// 而下面这段代码可以执行
makeRequest().then((result) => {
// do something
})
3.await ajax
意味着 console.log
调用会一直等待,直到 ajax
promise 完成并打印出它的值。
async/await 优点:
1. 简洁干净
节省了不少代码。不必写 .then
,创建一个匿名函数来处理响应,或者给不需要用的变量一个名称 data
。还避免了代码嵌套。这些小小的优势会快速累积起来,在后面的代码中会变得更明显。
2. 错误处理
Async/await 会最终让用同样的结构( try/catch
)处理同步和异步代码变成可能。在下面使用 promise 的示例中,如果 JSON.parse
失败的话,try/catch
就不会处理,因为它是发生在一个 prmoise 中。需要在 promise 上调用 .catch
,并且重复错误处理代码。这种错误处理代码会比可用于生产的代码中的 console.log
更复杂。
const makeRequest = () => {
try {
ajax.then(result => {
console.log(result);
})
} catch(err) {
// statements
console.log(err);
}
}
用 async/await 实现的代码。现在 catch
块会处理解析错误。
const makeRequest = async () => {
try {
// 这个会解析失败
const data = JSON.parse(await ajax);
console.log(data)
} catch (err) {
console.log(err);
}
}
3. 条件句
假设想做像下面的代码一样的事情,获取一些数据,并决定是否应该返回该数据,或者根据数据中的某些值获取更多的细节。
const makeRequest = () => {
return ajax.then(data => {
if (data.flag) {
return makeAnotherRequest(data).then(moreData => {
console.log(moreData);
return moreData;
})
} else {
console.log(data);
}
})
}
这些代码看着就让人头疼。它只需将最终结果传播到主 promise,却很容易让我们迷失在嵌套、大括号和返回语句中。
把这个示例用async / await 重写,就变得更易于阅读。
const makeRequest = async () => {
const data = await ajax;
if (data.flag) {
const moreData = await makeAnotherRequest(data);
console.log(moreData);
return moreData;
} else {
console.log(data);
}
}
4. 中间值
情景:调用 promise1,然后用它的返回值来调用promise2,然后使用这两个 promise 的结果来调用 promise3。你的代码很可能看起来像这样:
const makeRequest = () => {
return pomise1().then(value1 => {
return pomise2().then(value2 => {
return pomise3(value1, value2);
})
})
}
如果 promise3
不需要 value1
,那么很容易就可以把 promise 嵌套变扁平一点。那么可能就会像下面这样,在一个 Promise.all
中包含值 1 和 2,并避免更深层次的嵌套:
const makeRequest = () => {
return pomise1().then(value1 => {
return Pomise.all([
value1,
promise2(value1)
]).then(([value1, value2]) => {
return pomise3(value1, value2);
})
})
}
这种方法为了可读性而牺牲了语义。除了为了避免 promise 嵌套,没有理由将 value1
和value2
并入一个数组。
不过用 async/await 的话,同样的逻辑就变得超级简单直观了。
const makeRequest = async () => {
const value1 = await promise1();
const value2 = await promise2();
return promise3(value1, value2);
}
5. 错误栈
假如有一段链式调用多个 promise 的代码,在链的某个地方抛出一个错误。
// 错误栈
const makeRequest = () => {
return callAPromise().then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => {
throw new Error('opps';)
})
} makeRequest().catch(err => {
console.log(err);
})
从 promise 链返回的错误栈没有发现错误发生在哪里的线索。更糟糕的是,这是误导的;它包含的唯一的函数名是callAPromise
,它完全与此错误无关(不过文件和行号仍然有用)。
但是,来自async / await的错误栈会指向包含错误的函数:
const makeRequest = async() => {
await callAPromise();
await callAPromise();
await callAPromise();
await callAPromise();
await callAPromise();
throw new Error('oops');
} makeRequest().catch(err => {
console.log(err);
})
当在本地环境中开发并在编辑器中打开文件时,这不是啥大事,但是当想搞清楚来自生产服务器的错误日志时,就相当有用了。在这种情况下,知道错误发生在makeRequest
中比知道错误来自一个又一个的 then
要好。
6. 调试
最后但是同样重要的是,在使用 async/await 时,一个杀手级优势是调试更容易。调试 promise 一直是如此痛苦,有两个原因:
没法在返回表达式(无函数体)的箭头函数中设置断点。
// 错误栈
const makeRequest = () => {
return callAPromise().then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => {
throw new Error('opps';)
})
}
试着在此处设置断点
2.如果在.then
块中设置断点,并使用像单步调试这类调试快捷方式,调试器不会移动到后面的 .then
,因为它只单步调试同步代码。
有了 async/await,我们就不再需要那么多箭头函数,您可以像正常的同步调用一样单步调试 await 调用。
const makeRequest = async() => {
await callAPromise();
await callAPromise();
await callAPromise();
await callAPromise();
await callAPromise();
throw new Error('oops');
}
总结
Async/await 是过去几年中添加到 JavaScript 中的最具革命性的功能之一。它让我们意识到 promise 的语法有多混乱,并提供了直观的替代。