在前端开发中，异步编程是非常常见的需求。异步编程可以帮助我们在执行耗时操作时不会阻塞主线程，提高应用的性能和用户体验。但是，异步编程也会带来一些问题，例如回调地狱、代码可读性差等。ES9 中引入了 async 和 await 这两个关键字来解决这些问题。
async 和 await 简介
async 和 await 是 ES9 中引入的两个关键字，它们可以帮助我们更好地管理异步编程。async 用于声明一个异步函数，而 await 用于等待一个异步函数执行完成并返回结果。
使用 async 和 await 可以让我们以同步的方式编写异步代码，这样代码可读性更好，也更容易维护。下面是一个简单的示例：
-- -------------------- ---- ------- ----- -------- --------- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ------ ----- - --------- ---------- -- ------------------ ------------ -- ----------------------展开代码
在这个示例中，我们使用 async 声明了一个异步函数 getData，该函数使用 await 等待 fetch 方法获取数据并解析为 JSON 格式。最后，我们返回获取到的数据。
使用 async 和 await 的优点
使用 async 和 await 可以带来以下优点：
1. 可读性更好
使用 async 和 await 可以让异步代码看起来像同步代码，这样代码可读性更好。例如，下面是一个使用 Promise 的异步代码：
function getData() { return fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { // do something with data }) .catch(error => console.error(error)); }
而使用 async 和 await 后，代码变得更加简洁易懂：
-- -------------------- ---- ------- ----- -------- --------- - --- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- -- -- --------- ---- ---- - ----- ------- - --------------------- - -展开代码
2. 错误处理更方便
使用 async 和 await 可以让错误处理更加方便。在使用 Promise 时，我们需要使用 catch 方法来捕获错误。而使用 async 和 await 后，我们可以使用 try-catch 语句来捕获错误，使错误处理更加集中和方便。
3. 可以更好地管理异步代码
使用 async 和 await 可以让我们更好地管理异步代码。在使用 Promise 时，我们可能需要使用多个 then 方法来处理异步操作的结果。而使用 async 和 await 后，我们可以在一个函数中处理多个异步操作的结果，使代码更加简洁和易于维护。
使用 async 和 await 的注意事项
在使用 async 和 await 时，需要注意以下事项：
1. async 函数返回值是 Promise
使用 async 声明的函数会返回一个 Promise 对象。在函数体中，我们可以使用 return 返回一个值，这个值会作为 Promise 的 resolve 值。如果函数中抛出了异常，那么这个异常会被包装成一个 reject 值。
2. await 只能在 async 函数中使用
await 只能在 async 函数中使用。如果在其他函数中使用 await，会导致语法错误。
3. await 只能等待 Promise 对象
await 只能等待 Promise 对象。如果我们需要等待其他类型的对象，可以使用 Promise.resolve 方法将其转换为 Promise 对象。
4. 多个异步操作可以并行执行
使用 async 和 await 可以让我们更好地管理异步代码。在一个 async 函数中，我们可以使用多个 await 来等待多个异步操作的结果。这些异步操作可以并行执行，从而提高代码的性能。
示例代码
下面是一个使用 async 和 await 的示例代码，该代码使用 async 和 await 来处理多个异步操作的结果：
-- -------------------- ---- ------- ----- -------- --------- - --- - ----- --------------- -------------- - ----- ------------- --------------------------------------- -------------------------------------- --- ----- ----- - ----- --------------------- ----- ----- - ----- --------------------- -- -- --------- ---- ----- --- ----- - ----- ------- - --------------------- - -展开代码
在这个示例中，我们使用 Promise.all 方法等待多个异步操作的结果。这些异步操作可以并行执行，从而提高代码的性能。最后，我们使用 await 等待每个异步操作的结果，并在 try-catch 语句中处理错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d55867a941bf71349e7121
