有一种特殊的语法可以以更舒适的方式处理promises，称为“async / await”。在理解和使用起来非常简单。
目录
- Async
- Await
- 错误处理
- 总结
- 参考
Async
在函数前面添加async意味着一件简单的事：函数总是返回一个promise。如果代码中包含return <non-promise>,JavaScript则会自动将其包装到返回的promise的resolved中
async function f() {
return 1
}
//使用
f().then(console.log) //1
//等同于
f().then(res=>{
console.log(res) //1
})
上述代码等同于我们可以明确返回一个promise
async function f() {
return Promise.resolve(1)
}
//使用
f().then(console.log) //1
因此，async确保了函数会返回一个promise，并在其中包含非promise代码。很简单吧！但不仅如此，还有另一个关键字await，它只能在异步函数中运行，而且非常酷。
Await
基本语法
//仅适用于异步函数
let value = await promise;
关键词await可以让JavaScript等到promise结束后再返回它的值
这里有一个promise1秒之后才resolve()的例子
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("done!"), 1000)
})
let result = await promise; // wait till the promise resolves (*)
alert(result); // "done!"
}
f()
函数在(*)一行执行“暂停”，直到promise结算完毕后才继续执行，同时result变成了这个函数的返回值。所以上述代码会在1秒之后弹出“done！”
强调：await字面量意思是让JavaScript等到promise结束，然后继续执行。这不会花费任何CPU资源，因为引擎可以同时执行其他任务：执行其他脚本、处理事件等。
它只是一种更优雅的语法来获得promise结果，而不是用promise.then，更容易阅读和编写。
⚠ 不能在非异步函数中使用
await
如果我们尝试在非异步函数中使用await，那将是语法错误：
function f() {
let promise = Promise.resolve(1);
let result = await promise; // Syntax error
}
如果我们忘记在函数之前放置异步(async)，我们会得到这样的错误。如上所述，await仅在异步函数内部工作。
刚开始使用await的人往往会忘记这一点，但我们不能在顶级函数中写await，这不起作用。
// syntax error in top-level code
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();
因此，我们需要为await的代码提供包装异步功能，就像上面的例子一样。
⚠
await接受那些具有可调用的then方法的对象
就像promise.then一样，await允许使用thenable对象（那些具有可调用的then方法）。这意味着，第三方对象可能不是promise对象，但只要可调用then方法，那么这足以与await一起使用。
例如，这里await接受new Thenable(1)：
class Thenable {
constructor(num) {
this.num = num;
}
then(resolve, reject) {
alert(resolve); // function() { native code }
// resolve with this.num*2 after 1000ms
setTimeout(() => resolve(this.num * 2), 1000); // (*)
}
};
async function f() {
// waits for 1 second, then result becomes 2
let result = await new Thenable(1);
alert(result);
}
f();
⚠ 异步方法
类方法也可以是异步的，只需在它之前放入async。
class Waiter {
async wait() {
return await Promise.resolve(1);
}
}
new Waiter()
.wait()
.then(alert); // 1
错误处理
如果promise解析正常，则await promise返回结果。但是在返回reject的情况下，就需要使用throw语句抛出错误。
async function f() {
await Promise.reject(new Error("Whoops!"));
}
等同于
async function f() {
throw new Error("Whoops!");
}
在实际情况中，promise可能需要一些时间才能返回reject。所以await会等待，然后抛出一个错误。 我们可以使用try..catch捕获该错误，与常规throw相同：
async function f() {
try {
let response = await fetch('http://no-such-url');
} catch(err) {
alert(err); // TypeError: failed to fetch
}
}
f();
如果出现错误，控件将跳转到catch块。我们还可以包装多行：
async function f() {
try {
let response = await fetch('/no-user-here');
let user = await response.json();
} catch(err) {
// catches errors both in fetch and response.json
alert(err);
}
}
f();
如果我们没有try..catch，则异步函数f()调用生成的promise将被拒绝。我们可以附加.catch来处理它：
async function f() {
let response = await fetch('http://no-such-url');
}
// f() becomes a rejected promise
f().catch(alert); // TypeError: failed to fetch // (*)
async/await和promise.then/catch
当我们使用async/await时，我们很少需要.then，因为await处理等待事件。我们可以使用常规的try..catch而不是.catch。这通常（并非总是）更方便。 但是在代码的顶层，当我们在任何异步函数之外时，我们在语法上就无法使用await，因此通常的做法是添加.then/catch来处理最终结果或错误处理。 就像上面例子的(*)一行一样。
async/await也很好地适用于Promise.all
当我们需要等待多个promise时，我们可以将它们包装在Promise.all中然后使用await：
// wait for the array of results
let results = await Promise.all([
fetch(url1),
fetch(url2),
...
]);
如果出现错误，它会像往常一样传播：在Promise.all中返回reject，然后我们可以使用try..catch捕获的异常。
总结
async关键字放在函数前的有两个效果：
1.使它始终返回一个promise。
2.允许在其中使用await。
await关键字放在promise之前，函数会在执行中“暂停”，直到promise结算完毕后才继续执行：
如果是错误，则会生成异常，就像throw error在该位置一样调用。
否则，它返回结果，因此我们可以将其指定成一个值。
它们共同提供了一个很好的框架来编写易于读写的异步代码。
随着async/await的发布，我们很少需要写promise.then/catch，但我们仍然不应该忘记，他们是基于promise，因为有时（例如，在函数最外面）我们必须使用这些方法。同时Promise.all可以等待许多任务也是一件好事。
参考
- [1] Top-level await is a footgun
gist.github.com
网友评论