随着前端技术的不断发展，越来越多的应用程序需要进行异步操作。在 JavaScript 中，异步操作通常使用回调函数来实现。然而，回调函数嵌套过多会导致代码难以维护和理解，这就是所谓的“回调地狱”。为了解决这个问题，ES9 引入了异步函数和 await 关键字。本文将介绍异步函数和 await 的使用方法和注意事项，并提供示例代码。
异步函数
异步函数是一种特殊的函数，它可以在函数内部使用 await 关键字来等待异步操作完成。异步函数的定义方式与普通函数类似，只需要在函数前面加上 async 关键字即可。
async function myAsyncFunction() {
// 异步操作
}异步函数可以返回一个 Promise 对象，也可以返回其他类型的值。如果返回一个 Promise 对象，那么异步函数的状态将取决于 Promise 对象的状态。如果 Promise 对象被 resolved，那么异步函数将返回 resolve 的值。如果 Promise 对象被 rejected，那么异步函数将抛出一个错误。
-- -------------------- ---- -------
----- -------- ----------------- -
------ --- ----------------- ------- -- -
-- ----
-- --- ------ --- -
---------- ----- ----
- ---- -
--------- ----- ----
-
---
-await 关键字
await 关键字只能在异步函数中使用。它可以暂停异步函数的执行，等待一个 Promise 对象的状态变化。如果 Promise 对象被 resolved，那么 await 将返回 resolve 的值。如果 Promise 对象被 rejected，那么 await 将抛出一个错误。
async function myAsyncFunction() {
const result = await myPromise;
// 在这里处理 result
}需要注意的是，await 关键字只能在异步函数中使用。如果在普通函数中使用 await，会导致语法错误。另外，await 关键字只能等待 Promise 对象的状态变化，如果等待其他类型的值，将会直接返回该值。
async function myAsyncFunction() {
const result = await 42; // 直接返回 42
}示例代码
下面是一个使用异步函数和 await 的示例代码。该代码从一个 URL 中获取 JSON 数据，并使用 await 关键字等待异步操作完成。如果获取 JSON 数据成功，将在控制台中打印数据。如果获取 JSON 数据失败，将在控制台中打印错误信息。
-- -------------------- ---- -------
----- -------- ------------ -
----- -------- - ----- -----------
-- ------------- -
----- ---- - ----- ----------------
------------------
- ---- -
----------------- ---- -------
-
-
--------------------------------------------------------在上面的代码中，fetch 函数返回一个 Promise 对象，它可以用来获取 JSON 数据。如果 response.ok 为 true，表示获取数据成功，可以使用 response.json() 方法来获取 JSON 数据。如果 response.ok 为 false，表示获取数据失败，将在控制台中打印错误信息。
总结
异步函数和 await 关键字是 ES9 中新增的重要特性，它们可以帮助我们更好地处理异步操作，避免回调地狱的问题。在使用异步函数和 await 关键字时，需要注意以下几点：
- 异步函数必须使用 async 关键字声明。
- await 关键字只能在异步函数中使用。
- await 关键字只能等待 Promise 对象的状态变化。
- 如果 Promise 对象被 rejected，将会抛出一个错误。
- 异步函数可以返回一个 Promise 对象，也可以返回其他类型的值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6504a2f695b1f8cacd1429f8