什么是 async/await
async/await 是 ES9 中新增的语法糖，用来简化异步操作的代码。它是基于 Promise 的，能够让我们以同步的方式编写异步代码，使得代码更加清晰和易于维护。
async/await 的使用
async/await 由两个关键字组成：async 和 await。其中 async 用于修饰函数，表示该函数是异步函数；await 用于等待异步操作的结果，只能在异步函数中使用。
async 函数
async 函数的定义方式如下：
async function foo() {
// 异步操作
}async 函数的返回值是一个 Promise 对象，如果函数内部没有显式返回一个 Promise 对象，那么 async 函数会隐式地将返回值包装成一个 Promise 对象。
await 表达式
await 表达式用于等待一个 Promise 对象的执行结果，只能在异步函数中使用。await 表达式会阻塞后面的代码，直到 Promise 对象的状态发生变化（变为 resolved 或 rejected）。
async function foo() {
const result = await promise;
console.log(result);
}在上面的代码中，当 promise 对象的状态变为 resolved 时，await 表达式会返回 promise 对象的结果，并将其赋值给 result 变量。
async/await 示例
下面是一个使用 async/await 的示例代码：
// javascriptcn.com 代码示例
function delay(time) {
return new Promise(resolve => {
setTimeout(resolve, time);
});
}
async function foo() {
console.log("start");
await delay(1000);
console.log("end");
}
foo();在上面的代码中，我们定义了一个 delay 函数，用于模拟一个异步操作，该函数返回一个 Promise 对象，等待一段时间后将 Promise 对象的状态变为 resolved。
接着，我们定义了一个 async 函数 foo，该函数内部先输出 start，然后等待一秒钟，最后输出 end。
最后，我们调用 foo 函数，运行代码会输出如下结果：
start （等待一秒钟） end
async/await 的优点
使用 async/await 的优点主要有以下几个：
- 更加清晰和易于维护的代码：使用 async/await 可以让异步代码看起来像同步代码，使得代码更加清晰和易于维护。
- 更好的错误处理：使用 try/catch 可以更容易地捕获错误，并进行处理。
- 更加可读性强的代码：使用 async/await 可以避免回调地狱，使得代码更加可读性强。
async/await 的注意事项
使用 async/await 时需要注意以下几点：
- async 函数内部只能使用 await 表达式等待 Promise 对象的执行结果，不能等待其他类型的值。
- await 表达式只能在异步函数中使用，否则会报错。
- 如果 Promise 对象的状态变为 rejected，那么 await 表达式会抛出一个错误，需要使用 try/catch 进行捕获。
- async 函数的返回值是一个 Promise 对象，如果返回的不是 Promise 对象，那么会隐式地将其包装成一个 Promise 对象。
- async/await 并不是完全替代 Promise 的，它只是 Promise 的一种更加易于使用的语法糖。
总结
async/await 是 ES9 中新增的语法糖，用于简化异步操作的代码。它是基于 Promise 的，能够让我们以同步的方式编写异步代码，使得代码更加清晰和易于维护。使用 async/await 可以避免回调地狱，使得代码更加可读性强。在使用 async/await 时需要注意一些细节，如只能在异步函数中使用 await 表达式等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650a6dcb95b1f8cacd4cb295