Generator 函数是 ES6 中引入的一种特殊函数，其执行过程可以被暂停和继续，通过 yield 关键字可以返回多次结果。而 Promise 是一种异步编程的解决方案，用于处理异步操作的结果。Generator 函数和 Promise 的结合，可以使异步编程变得更加简单和优雅。
Generator 函数
Generator 函数使用 function* 声明，其中可以使用 yield 关键字返回结果。当 Generator 函数被调用时，返回一个迭代器对象。每次调用迭代器对象的 next 方法，都会执行 Generator 函数中的代码，直到遇到 yield 关键字，暂停执行并返回 yield 后面的结果。再次调用 next 方法时，会从上次暂停的位置继续执行 Generator 函数。
以下是一个简单的 Generator 函数示例：
// javascriptcn.com 代码示例
function* foo() {
const a = yield 'a';
const b = yield 'b';
const c = yield 'c';
return a + b + c;
}
const iterator = foo();
console.log(iterator.next()); // { value: 'a', done: false }
console.log(iterator.next(1)); // { value: 'b', done: false }
console.log(iterator.next(2)); // { value: 'c', done: false }
console.log(iterator.next(3)); // { value: 6, done: true }Promise
Promise 是一种异步编程的解决方案，用于处理异步操作的结果。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当 Promise 的状态变为 fulfilled 或 rejected 时，称为 Promise 已 settled。Promise 可以通过 then 方法注册回调函数，当 Promise 的状态变为 fulfilled 时，调用 then 方法的第一个参数；当 Promise 的状态变为 rejected 时，调用 then 方法的第二个参数。
以下是一个简单的 Promise 示例：
// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
const random = Math.random();
if (random >= 0.5) {
resolve(random);
} else {
reject(new Error('Failed'));
}
}, 1000);
});
promise.then(
value => console.log(`Resolved: ${value}`),
error => console.log(`Rejected: ${error}`)
);Generator 函数与 Promise 的结合
由于 Generator 函数可以暂停和继续执行，因此可以与 Promise 配合使用，实现异步操作的流程控制。Generator 函数可以通过 yield 关键字返回 Promise 对象，然后在 Generator 函数中使用 yield* 关键字执行 Promise 对象的 then 方法，等待 Promise 对象的状态变为 settled。当 Promise 对象的状态变为 fulfilled 时，调用 then 方法的第一个参数，并将结果作为 yield 关键字的返回值。当 Promise 对象的状态变为 rejected 时，抛出异常并在 Generator 函数外部捕获。
以下是一个简单的 Generator 函数与 Promise 的结合示例：
// javascriptcn.com 代码示例
function* foo() {
try {
const value1 = yield Promise.resolve(1);
const value2 = yield Promise.resolve(2);
const value3 = yield Promise.resolve(3);
return value1 + value2 + value3;
} catch (error) {
console.error(error);
}
}
function run(generator) {
const iterator = generator();
function step(value) {
const result = iterator.next(value);
if (!result.done) {
Promise.resolve(result.value).then(step, error => iterator.throw(error));
} else {
console.log(result.value);
}
}
step();
}
run(foo);在上面的示例中，通过 run 函数执行 Generator 函数 foo。run 函数中的 step 函数负责执行 Generator 函数中的每一个 yield 表达式。当 yield 表达式返回的是 Promise 对象时，使用 Promise.resolve 包装后返回的结果是一个 Promise 对象；使用 then 方法执行 Promise 对象的回调函数，如果执行成功则调用 step 函数继续执行下一个 yield 表达式；如果执行失败则调用 iterator.throw 方法抛出异常。当 Generator 函数的返回值返回时，输出最终结果。
总结
Generator 函数与 Promise 的结合，可以使异步编程变得更加简单和优雅。通过 yield 关键字返回 Promise 对象，使用 yield* 关键字执行 Promise 对象的 then 方法，等待 Promise 对象的状态变为 settled。当 Promise 对象的状态变为 fulfilled 时，调用 then 方法的第一个参数，并将结果作为 yield 关键字的返回值。当 Promise 对象的状态变为 rejected 时，抛出异常并在 Generator 函数外部捕获。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655edeacd2f5e1655d901e82