随着 JavaScript 语言的发展，异步编程一直是前端开发中最重要的一个部分。在 ES8 中，引入了 async 和 await 关键字，使异步编程变得更加方便易用。但是，学习和使用 async/await 并不是一件容易的事情，需要掌握一些技巧和规范来确保正确使用。
本文将介绍 ES8 中的 async/await，深入探讨它们的用法和注意事项，并通过示例代码说明如何正确地使用它们。
什么是 async/await
async/await 是一种基于 Promise 的异步编程模型，通过 async 和 await 关键字来实现。async 是用于定义一个异步函数的关键字，await 则是用于等待异步操作完成并返回结果的关键字。
async 函数可以看作是 Promise 的语法糖，它可以简化 Promise 的使用。在 async 函数中如果带有 await 关键字，表示这里需要等待 await 后面的异步函数执行完毕并返回结果，然后再继续执行后面的代码。
async/await 使用示例
下面是一个使用 async/await 实现异步操作的示例代码：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- ----------------------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-
------------在这个示例代码中，我们定义了一个异步函数 fetchUser，该函数使用了 await 关键字来等待 fetch 和 json 方法返回结果。由于 fetch 和 json 方法都是异步的，因此我们需要使用 await 来等待它们完成。代码中还使用了 try/catch 语句来处理 Promise 的错误。
async/await 的注意事项
虽然 async/await 看起来很简单易用，但是在使用过程中需要注意一些问题，以确保正确地使用。
1. 不要在顶层代码中使用 async
顶层的 async 函数虽然不会报错，但它会将代码转换成 Promise 对象，会对性能产生一定的影响。出于性能和规范角度考虑，我们应该将 async 函数定义在函数中，而不是在顶层代码中。
2. 使用 async/await 替换 Promise
在使用 async/await 进行异步编程时，我们应该尽量使用 async/await 替换 Promise。如果我们仍然需要使用 Promise，请注意使用 Promise.all 和 Promise.race 等方法进行批量异步操作。
3. 在 try/catch 中处理 Promise 的错误
使用 async/await 编写异步代码时，我们应该使用 try/catch 语句来处理 Promise 的错误。在 catch 中可以使用 console.error 或 throw 抛出错误。
4. 在 async 函数中使用 return 返回结果
在 async 函数中，我们应该使用 return 关键字返回结果，而不是使用 resolve 或 reject。
5. 使用 async/await 的时候需要注意函数执行的时序
async/await 特定的执行顺序：当遇到 await 时，会先执行 await 后面的异步代码，如果异步操作未完成则暂停当前函数，执行下一个异步代码片段并将其合并到主线程上，直到异步操作完成。
结论
async/await 是利用 Promise 来编写异步操作的语法糖，可以显著提高代码可读性和可维护性。虽然 async/await 看起来很简单易用，但我们在使用它们时需要注意上述注意点，以确保正确使用。掌握这些技巧可以让我们更好地理解和使用 async/await。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6703598ed91dce0dc84b37c9