在前端开发中，我们经常会遇到需要在代码执行完成前等待异步操作完成的情况。例如，从服务器拉取数据、执行动画或者进行用户输入时需要等待数据或者用户的操作。在过去，我们使用回调函数或者 Promise 来处理异步操作，但是这些方法并不总是易于阅读和调试。在 ES8 中，async/await 提供了一种更加直观和易于理解的方式来处理异步操作。
简介
Async/await 是 ES8 (ES2017) 引入的新特性，这个特性提供了一种让异步操作看起来就像同步操作的语法。Async/await 是基于 Promise 实现的，所以使用 async/await 也需要理解 Promise。
async 函数返回一个 Promise 对象，并且可以使用 await 暂停函数的执行，等待 Promise 对象的解决。当 Promise 对象被解决后，await 返回解决后的值，并恢复 async 函数的执行。
async 函数
Async 函数使用 async 关键字来声明，例如：
async function fetchData() {
const response = await fetch('https://example.com/data');
const data = await response.json();
return data;
}该示例使用 async 方式声明了一个函数，函数名为 fetchData。这个函数使用 fetch 方法从一个 URL 获取数据，并通过 await 暂停函数的执行等待获取数据的解决。当 response 解决后，使用 await 获得数据内容 result，并返回它。
await 关键字
await 关键字只能在 async 函数中使用，并用于等待 Promise 解决。例如，我们可以使用 await 等待 fetchData 函数在获取数据并返回解决后才执行下一个操作：
async function main() {
const data = await fetchData();
// 使用 data 执行其他操作
}在执行 main 函数时，该函数会等待 fetchData 函数完成，获取数据并返回解决之后才继续执行后面的操作。
示例代码
以下代码示例展示了如何使用 async/await。
// javascriptcn.com 代码示例
async function getData() {
try {
const response = await fetch('https://example.com/data');
const data = await response.json();
return data;
} catch(error) {
console.error(error);
}
}
async function main() {
const data = await getData();
console.log(data);
}
main();在此示例中，我们定义了两种函数：getData 和 main。getData 函数精简了 fetchData 函数，在获取数据前使用 try/catch 块来捕获潜在的错误，并使用 console.error 方法作为错误处理机制。
在 main 函数中，我们使用 await 等待 getData 函数完成并返回数据。一旦 data 被解决后，我们使用 console.log 方法来显示数据内容。
指导意义
使用 async/await 使异步代码易于读写和调试。使用 async/await 可以减少回调嵌套以及对 Promise 链式调用的依赖。它可以让代码更加清晰，使开发人员更容易理解和维护代码。在使用 async/await 时，应给函数添加注释，以便更好地理解代码意图，提高代码的可读性。
值得注意的是，async/await 还有其限制。async/await 仅适用于异步函数和 Promise。如果你想在多个异步调用之间进行协调和控制，仍然需要使用 Promise。
总结
Async/await 是基于 Promise 实现的新特性，可让异步操作看起来就像同步操作。async/await 可以提高代码的可读性和可维护性，但仅适用于异步函数和 Promise。在以后的开发中，建议尝试使用 async/await 来处理异步操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f966f7d4982a6eb0c0d53