在前端开发中，异步操作是很常见的。以往我们使用回调函数、Promise 等方式来处理异步操作，但这些方式都存在一些问题，比如回调函数嵌套过多、Promise 的 then 方法过多，代码可读性差等。ES8 中引入了 async/await，可以使我们更加优雅地处理异步操作，提高代码可读性和维护性。
async/await 是什么？
async/await 是 ES8 中新增的异步操作语法糖，它让我们可以使用同步的方式来处理异步操作。async/await 是基于 Promise 实现的，它的本质是 Generator 函数和自动执行器的语法糖。
async/await 的优点
- 代码可读性更高：使用 async/await 可以让异步代码看起来像同步代码，减少了回调函数和 then 方法的嵌套。
- 错误处理更加方便：使用 try/catch 可以更加方便地处理异步操作中的错误。
- 更加灵活：async/await 可以和其他语法结合使用，比如 for 循环、if 判断等。
async/await 的使用方法
- async 函数
async 函数是一个返回 Promise 对象的异步函数。async 函数内部可以使用 await 关键字来等待 Promise 对象的状态变化。下面是一个简单的示例：
-- -------------------- ---- ------- ----- -------- ----------- - ----- ------ - ----- -------------------------------------- ----- ---- - ----- -------------- ------ ----- - --------------------- -- - ------------------ -------------- -- - --------------------- ---展开代码
- await 表达式
await 表达式可以等待一个 Promise 对象的状态变化，如果 Promise 对象变为 rejected 状态，则会抛出一个错误。下面是一个示例：
-- -------------------- ---- ------- ----- -------- ----------- - ----- ------ - ----- -------------------------------------- ----- ---- - ----- -------------- -- ---------- --- -- - ----- --- ---------------- - ------ ----- - --------------------- -- - ------------------ -------------- -- - --------------------- ---展开代码
在上面的示例中，如果获取到的数据 code 不为 0，则会抛出一个错误。
- 错误处理
使用 try/catch 可以更加方便地处理异步操作中的错误。下面是一个示例：
-- -------------------- ---- ------- ----- -------- ----------- - --- - ----- ------ - ----- -------------------------------------- ----- ---- - ----- -------------- -- ---------- --- -- - ----- --- ---------------- - ------ ----- - ----- ------- - --------------------- ------ ----- - - --------------------- -- - ------------------ ---展开代码
在上面的示例中，如果获取数据失败，则会在控制台输出错误信息，并返回 null。
async/await 的注意事项
- async 函数返回的是一个 Promise 对象，如果 async 函数内部抛出了一个错误，则会返回一个 rejected 状态的 Promise 对象。
- await 只能在 async 函数内部使用，如果在其他函数中使用会报错。
- 如果 await 后面的表达式不是 Promise 对象，则会自动转换为 Promise 对象。
结语
async/await 是 ES8 中非常实用的异步操作语法糖，它让我们可以更加优雅地处理异步操作，提高了代码的可读性和维护性。在实际开发中，我们可以结合其他语法结合使用，比如 for 循环、if 判断等，让代码更加灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c90db1e46428fe9e003cf1
