随着前端技术的不断发展，JavaScript 也在不断地更新迭代。ES7 增加的一项新功能—— async/await ，它可以将异步的 Promise 变得同步，让我们可以更加方便地使用异步函数。本文将详细介绍 async/await 的使用方法、注意事项以及其在实际开发中的指导意义。
什么是 async/await ？
async 和 await 是 ECMAScript 2017 标准中新增的关键字。它们可以用来简化使用异步函数的代码，也就是让异步函数的使用方式更加清晰明了。它们可以用来代替 Promise 链。
async 用于声明一个异步函数，且会自动包装成 Promise。await 用于等待一个 Promise 对象的执行结果，可以使用在异步函数内部。
async/await 的语法结构
async/await 的语法结构如下：
async function foo() {
await someAsynchronousOperation();
return "done";
}
foo().then(result => {
console.log(result);
});上面这段代码中，定义了一个异步函数 foo(). 调用 foo() 时，它先执行内部的异步操作，当异步操作执行完后会返回一个结果，最后再根据结果来处理后续的逻辑。使用 await 等待异步操作结果时可以把异步的代码写成同步。
async/await 的注意事项
1. 只能用在异步函数内部
使用 await 关键字时， await 关键字只能在 async 函数内部使用，否则语法会报错。因为 await 它需要借助 async 将其内部的函数包装成 Promise 才能使用。
2. await 只能等待 Promise 对象
await 只能等待 Promise 对象，不能等待其他类型的对象。如果你不确定某个函数返回的是否是 Promise 对象，可以通过判断它是否具有 then() 方法。一个对象具有 then() 方法，通常就是 Promise 对象，这样你就可以顺利地使用 await 了。
3. await 是阻塞的
await 实际上是一种阻塞方法。在 await 语句执行时，它会阻塞后面的代码执行，直到 Promise 对象的状态改变，才会继续往下执行。所以，在实际开发中，需要注意等待的 Promise 是否会存在阻塞问题。
async/await 实战
下面是一个 async/await 的示例代码：
async function getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await response.json();
return data;
}
getData().then(console.log);上面的代码中，fetch() 是一个异步函数，用于发送 HTTP 请求。下面的代码会等待 Promise 对象返回数据并将其解析为 JSON，最终返回数据。我们使用 async 和 await 提高了代码的可读性。
指导意义
- 语法简洁明了：使用 async/await 可以让代码更加简洁明了。
- 更加易于调试：通过 async/await 我们可以很方便地在开发过程中设置断点。
- 改善了代码的可读性：async/await 让代码更加清晰直观，我们可以很方便地处理异步代码。
- 代码稳定性得到提高：使用 async/await 省去了手写 Promise 的过程，避免了一些错误的发生，提高了代码的稳定性。
总结
在实际开发中，异步编程已经成为开发中必不可少的一部分。async/await 的出现为我们打破了回调函数、Promise 链的限制，让异步编程更加容易实现和理解，也让我们可以更加方便地使用异步函数。希望大家在使用 async/await 时能够遵循上述注意事项，充分利用这门新技术实现更加高效地开发流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c529d48841e9894aabab8