在 JavaScript 中，异步编程一直是一个重要的话题。ES6 引入了 Promise 和 Generator，使得异步编程变得更加简单和优雅。而在 ES8 中，async/await 的出现更是进一步简化了异步编程的方式，让我们可以更加轻松地处理异步操作。本文将深入探讨 async/await 的使用方式和实现原理。
Promise 和 Generator
在开始讲解 async/await 之前，我们需要先了解一下 Promise 和 Generator 的使用方式。Promise 是用来处理异步操作的一种方式，它可以让我们更加方便地处理异步操作的结果。下面是一个使用 Promise 的示例：
// www.javascriptcn.com code example
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data fetched!');
}, 1000);
});
}
fetchData().then(data => {
console.log(data);
});在上面的代码中，我们使用 Promise 封装了一个异步操作 fetchData，然后在 then 方法中处理异步操作的结果。这种方式相对于传统的回调函数方式，代码更加清晰简洁。
而 Generator 则是用来处理异步操作的另一种方式，它可以让我们更加方便地控制异步操作的流程。下面是一个使用 Generator 的示例：
// www.javascriptcn.com code example
function* fetchData() {
const result1 = yield fetch('http://example.com/data1');
const result2 = yield fetch('http://example.com/data2');
return [result1, result2];
}
const iterator = fetchData();
iterator.next().value
.then(result1 => iterator.next(result1).value)
.then(result2 => iterator.next(result2).value)
.then(results => console.log(results));在上面的代码中，我们使用 Generator 定义了一个异步操作 fetchData，然后通过手动控制迭代器的方式，依次执行异步操作并处理结果。这种方式相对于 Promise 的 then 方法，更加灵活，可以更加方便地控制异步操作的流程。
async/await 的使用方式
async/await 是 ES8 中新增的语法糖，它可以让我们更加方便地处理异步操作。下面是一个使用 async/await 的示例：
async function fetchData() {
const result1 = await fetch('http://example.com/data1');
const result2 = await fetch('http://example.com/data2');
return [result1, result2];
}
fetchData().then(results => console.log(results));在上面的代码中，我们使用 async/await 定义了一个异步操作 fetchData，然后通过 await 关键字等待异步操作的结果。这种方式相对于 Promise 和 Generator，更加简洁和易懂，可以让我们更加轻松地处理异步操作。
需要注意的是，使用 async/await 时，我们需要将异步操作封装到一个 Promise 中，以便能够使用 await 关键字等待异步操作的结果。下面是一个错误的示例：
// www.javascriptcn.com code example
async function fetchData() {
const result1 = await fetch('http://example.com/data1');
const result2 = await fetch('http://example.com/data2');
return [result1, result2];
}
fetchData().then(results => console.log(results));
// Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.在上面的代码中，由于我们直接调用了 fetch 方法，而不是将其封装到一个 Promise 中，导致程序出现了错误。因此，使用 async/await 时，我们需要将异步操作封装到一个 Promise 中，以便能够正确地使用 await 关键字等待异步操作的结果。
async/await 的实现原理
async/await 的实现原理其实就是将 Generator 和 Promise 进行了封装和简化。下面是一个简单的实现示例：
// www.javascriptcn.com code example
function asyncToGenerator(generatorFunc) {
return function() {
const generator = generatorFunc.apply(this, arguments);
return new Promise((resolve, reject) => {
function step(key, arg) {
let generatorResult;
try {
generatorResult = generator[key](arg);
} catch (error) {
reject(error);
}
const { value, done } = generatorResult;
if (done) {
resolve(value);
} else {
Promise.resolve(value).then(
result => step('next', result),
error => step('throw', error)
);
}
}
step('next');
});
};
}
async function fetchData() {
const result1 = await fetch('http://example.com/data1');
const result2 = await fetch('http://example.com/data2');
return [result1, result2];
}
asyncToGenerator(fetchData)().then(results => console.log(results));在上面的代码中，我们使用了一个名为 asyncToGenerator 的函数，将 Generator 和 Promise 进行了封装和简化。具体来说，我们在 asyncToGenerator 函数中，将 Generator 的执行过程进行了封装，并且将每个 yield 关键字都转换成了 Promise 的 then 方法。这样一来，我们就可以像使用 async/await 一样，轻松地处理异步操作了。
需要注意的是，上面的代码只是一个简单的实现示例，实际上 async/await 的实现原理比这要复杂得多。不过，通过这个示例，我们可以更加深入地理解 async/await 的本质，以及它是如何简化异步编程的。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d19d03a941bf7134369a5e