了解 Async/Await 如何工作 ——ES7
在 JavaScript 中，异步编程一直是一个重要的话题。ES6 引入了 Promise，但是它的语法可能有些繁琐。ES7 引入了 Async/Await，它提供了一种更加简洁的方式来处理异步编程。
本文将介绍 Async/Await 的基本语法和原理，以及如何在实际项目中使用它。
基本语法
Async/Await 是基于 Promise 的，所以在学习 Async/Await 之前，你需要了解 Promise 的基本概念。如果你还没有学习 Promise，可以参考 Promise 的官方文档。
在函数定义前加上 async 关键字，它会返回一个 Promise 对象。在函数内部，可以使用 await 关键字来等待 Promise 的解决或拒绝。下面是一个例子：
async function foo() {
const result = await Promise.resolve('hello');
console.log(result);
}
foo(); // 输出 'hello'上面的代码中，我们定义了一个 async 函数 foo，它返回一个 Promise 对象。在函数内部，我们使用 await 等待 Promise 的解决，然后将结果保存在 result 变量中，并输出结果。
原理
Async/Await 的原理就是将异步操作转换为同步操作。当我们使用 await 关键字等待一个 Promise 的解决时，JavaScript 引擎会暂停当前函数的执行，直到 Promise 被解决或拒绝。这个过程是完全同步的，就像使用普通的同步函数一样。
当 Promise 被解决或拒绝后，JavaScript 引擎会恢复当前函数的执行，并将 Promise 的解决或拒绝值作为 await 表达式的结果返回。如果 Promise 被拒绝，await 表达式会抛出一个错误，可以使用 try/catch 语句来捕获这个错误。
下面是一个例子：
// javascriptcn.com 代码示例
async function foo() {
try {
const result = await Promise.reject(new Error('oops'));
} catch (err) {
console.log(err.message);
}
}
foo(); // 输出 'oops'上面的代码中，我们使用 Promise.reject 创建了一个被拒绝的 Promise，然后在 async 函数 foo 中使用 await 等待这个 Promise 的拒绝。由于 Promise 被拒绝，await 表达式会抛出一个错误，我们使用 try/catch 语句来捕获这个错误并输出错误信息。
使用 Async/Await
在实际项目中，我们可以使用 Async/Await 来处理各种异步操作，比如 AJAX 请求、文件读写、数据库查询等等。下面是一个使用 Async/Await 处理 AJAX 请求的例子：
// javascriptcn.com 代码示例
async function getData(url) {
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (err) {
console.log(err);
}
}
getData('https://api.github.com/users/octocat'); // 输出用户信息上面的代码中，我们定义了一个 async 函数 getData，它接受一个 URL 参数。在函数内部，我们使用 fetch 函数发送 AJAX 请求，然后使用 await 等待响应的解决，并将响应数据解析为 JSON 格式。最后，我们输出解析后的数据。
如果 AJAX 请求失败，await 表达式会抛出一个错误，我们使用 try/catch 语句来捕获这个错误并输出错误信息。
总结
Async/Await 是一种更加简洁的方式来处理异步编程。它的基本语法和 Promise 类似，但是更加易于理解和使用。在实际项目中，我们可以使用 Async/Await 来处理各种异步操作，从而提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656c27c1d2f5e1655d48e209