从 ES6 到 ES7 细说 JS 的异步变革：Generator，Promise，async/await
随着前端技术的飞速发展，JavaScript 作为前端开发的主要语言，也在不断地更新和改进。其中，异步编程是 JavaScript 中一个非常重要的话题。在 ES6 和 ES7 中，JS 异步编程得到了很大的改进，主要体现在 Generator，Promise 和 async/await 三个方面。
- Generator
Generator 是一种特殊的函数，它可以在函数执行期间暂停和恢复。Generator 函数通过 yield 语句来实现暂停和恢复。在调用 Generator 函数时，函数并不会立即执行，而是返回一个迭代器对象。每次调用迭代器对象的 next() 方法时，Generator 函数会执行到 yield 语句处并返回 yield 后面的值，然后暂停函数执行。当再次调用迭代器对象的 next() 方法时，Generator 函数会从暂停的地方继续执行，直到执行完毕或遇到下一个 yield 语句。
下面是一个简单的 Generator 函数示例：
// javascriptcn.com 代码示例
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}
const gen = myGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3- Promise
Promise 是一种异步编程的解决方案，它可以将异步操作的结果以回调函数的形式返回。Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当 Promise 对象的状态从 pending 变为 fulfilled 或 rejected 时，Promise 对象会调用 then() 方法或 catch() 方法来处理结果。
下面是一个简单的 Promise 示例：
// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, Promise!');
}, 1000);
});
promise.then((value) => {
console.log(value); // Hello, Promise!
}).catch((error) => {
console.error(error);
});- async/await
async/await 是 ES7 中引入的异步编程解决方案，它是基于 Generator 和 Promise 实现的。async/await 可以让异步代码看起来像同步代码，使得代码更加简洁易读。
async 函数返回一个 Promise 对象，可以在函数内部使用 await 关键字来等待 Promise 对象的状态变化。当 await 关键字后面的 Promise 对象状态变为 fulfilled 时，await 表达式的值就是 Promise 对象的返回值。
下面是一个简单的 async/await 示例：
// javascriptcn.com 代码示例
function getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, async/await!');
}, 1000);
});
}
async function main() {
const data = await getData();
console.log(data); // Hello, async/await!
}
main();总结
Generator，Promise 和 async/await 是 JavaScript 异步编程中的三个重要方面。通过使用这些新特性，我们可以更加方便地处理异步代码，使得代码更加简洁易读。在实际开发中，我们可以根据不同的需求选择不同的异步编程方案，以达到更好的编程效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653c68977d4982a6eb68c76c