在现代的前端开发中，异步编程是一个不可避免的话题。ES6 引入的 Promise 成为了处理异步任务的首选方式，而 ES8 引入的 async/await 更是能够让异步编程达到前所未有的简洁程度。本文将详细介绍 async/await 的实现原理，并分析其与 Promise 的关系。
async/await 的简介
async/await 是 ES8（或者叫 ECMAScript 2017） 中引入的新特性，它可以让我们使用类似于同步代码的形式来处理异步任务。async 表示异步操作，而 await 就是等待异步操作完成。async/await 的语法如下所示：
async function foo() {
const result1 = await asyncTask1();
const result2 = await asyncTask2(result1);
return result2;
}在上面的例子中，foo 函数返回的是一个 Promise 对象。当我们调用 foo 函数时，它会依次执行 asyncTask1 和 asyncTask2 两个异步任务，直到它们都完成并返回结果。如果在执行 asyncTask1 或 asyncTask2 时遇到错误，foo 函数会抛出一个异常，这也会使得 Promise 被 reject。
async/await 的实现原理
async/await 的实现原理其实是基于 Promise 的实现。在 async 函数内部，它会先将其内部的异步操作封装成一个 Promise 对象。
以上面的例子来说，foo 函数内部会被转换成一个类似于下面这样的形式：
// javascriptcn.com 代码示例
function foo() {
return new Promise((resolve, reject) => {
asyncTask1().then((result1) => {
asyncTask2(result1).then((result2) => {
resolve(result2);
}).catch((error) => {
reject(error);
});
}).catch((error) => {
reject(error);
});
});
}这里需要注意的是，async 函数与普通的函数不同，它会自动将返回值包装成一个 Promise 对象。如果在 async 函数中使用 return 关键字返回一个值，那么这个值会被包装成一个解析后的 Promise 对象。
另外，async 函数如果没有使用 await 关键字来等待异步任务，它其实就变成了一个普通的函数。因此，async/await 的优秀之处也在于它可以让异步代码变得更加直观和易懂。
async/await 与 Promise 的关系
我们可以将 async/await 看作是 Promise 的一种语法糖。实际上，async/await 本质上就是在使用 Promise。在上面的转换后的代码中，我们可以看到 async/await 可以让我们省略一些冗长的 Promise 调用链。
再次强调一遍，async 函数和 await 关键字只是为了让异步代码看起来像同步代码，使得代码更加易读易懂。但是，async/await 并不会加速异步代码的执行，也不会改变异步代码的特性。
示例代码
下面我们通过示例代码来加深大家对 async/await 的理解：
// javascriptcn.com 代码示例
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function foo() {
console.log('waiting...');
await delay(2000); // 暂停当前函数的执行 2 秒钟
console.log('done');
}
console.log('start...');
foo();
console.log('end...');在上面这个例子中，我们定义了一个 delay 函数，它会返回一个 Promise 对象，让它等待一定的时间后再返回。在 foo 函数中，我们使用 await 来等待了 2 秒钟，接着才会打印出 done。由于 await 会暂停函数的执行，因此这个示例中的输出结果是先 start...、waiting...、end...，最后才是 done。
总结
async/await 是一种优秀的异步编程方式，它让我们可以写出直观易懂、优雅简洁的异步代码。不过，async/await 的实现原理其实就是基于 Promise 的实现，因此我们需要对 Promise 的使用以及异步原理有一定的了解。希望本文能够帮助大家更好地掌握 async/await 的使用，从而写出更加优秀的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6540a7ef7d4982a6eba2d6c1