首先babel链接很重要
看这个之前 其实可以先去了解一下co库 (以前看这个库我是真心觉得不错,代码量还不大)
不想看库的话 请看下面简易版
function isPromise(obj: any) {
return typeof obj.then === "function";
}
function isGenerator(obj: any) {
return typeof obj.next === "function" && typeof obj.throw === "function";
}
function isGeneratorFunction(obj: any) {
const { constructor } = obj;
if (!constructor) return false;
if ([constructor.name, constructor.displayName].includes("GeneratorFunction"))
return true;
return isGenerator(constructor.prototype);
}
//上面三个是co库原生的校验
export default function co(gen) {
return new Promise((resolve, _reject) => {
typeof gen === "function" && (gen = gen());
function next(data) {
const ret = gen.next(data);
if (ret.done) return resolve(ret.value);
toPromise(ret.value).then(next);
}
function toPromise(obj) {
if (isPromise(obj)) return obj;
if (isGeneratorFunction(obj) || isGenerator(obj)) return co(obj);
// if (other types) {}
return; // error
}
next();
});
}
Generator对象
一、generator Object
- 由 Generator 执行后返回,带有 next、return、throw 等原型方法
function* gen() {}
const gObj = gen();
gObj.next();
gObj.return();
二、Generator
- 可通过
function*
语法来定义,它是 GeneratorFunction 的实例
Object.getPrototypeOf(gen).constructor // GeneratorFunction {prototype: Generator, ...}
三、GeneratorFunction
- 内置函数,但没有直接挂到 window 上,但可以通过实例来获取
const GeneratorFunction = Object.getPrototypeOf(gen).constructor;
- GeneratorFunction 和
Function
是一个级别的,可以传参来创建函数,如
const gen = new GeneratorFunction('a', 'yield a * 2');
四、三者之间的关系
如果对原型链和继承记不清了先看看原型链与继承
class GeneratorFunction {}
// GeneratorFunction 的 prototype 很通用,单独拎出来
class GeneratorFunctionPrototype {
static [Symbol.toStringTag] = "GeneratorFunction";
// 实现 iterator protocol
next(args) {}
return(args) {}
throw(args) {}
// 实现 iterable protocol
[Symbol.iterator]() {
return this;
}
}
// 相互引用
GeneratorFunctionPrototype.constructor = GeneratorFunction;
GeneratorFunction.prototype = GeneratorFunctionPrototype;
// 作用不大,设置 prototype 即可
//class Generator {}
//Generator.prototype = GeneratorFunctionPrototype.prototype;
async/await 和 Generator函数区别
async function a() {}
function* b() {}
// babel 编译后
function asyncGeneratorStep(gen, resolve, reject, _next, ...) {
// 调用 gen 的 next 或 throw 方法
var info = gen[key](arg);
var value = info.value;
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
return new Promise(function (resolve, reject) {
// 获取 generator 对象
var gen = fn.apply(self, arguments);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
// 初始化执行 next
_next(undefined);
});
};
}
说白了async/await 也就是co库的原生处理 自动执行Generator 但是对比Generator删减了如何监听另一个 Generator 的执行过程的功能
Generator 深入探索
以下代码基本都是babel的简写或粘贴过来的直接看babel编译过的也一样
let num = 0;
async function gen() {
num = num + (await wait(10));
// num = (await wait(10)) + num;
await foo();
return num;
}
async function foo() {
await "wangshun";
}
(async () => {
// debugger;
await gen();
console.log("ws: res", num);
})();
一、问题
Generator 的状态是如何实现的换句话说 Generator 是怎么做到 yield 结束就停止的????Generator是如何让权给另一个 Generator,之后又让权回来的???一个 Generator 是如何监听另一个 Generator 的执行过程,即 yield* ???
二、状态
- 状态实现不难,其实就是用一个flag标志记录状态在一定的时候去执行
- 状态是由用户层面代码生成,里面使用
switch case + context 记录参数
实现
function _callee$(_context) {
while (1) {
switch (_context.next) {
case 0:
// await wait(10)
_context.next = 3;
return wait(10);
case 3:
// await 123
_context.next = 7;
return 123;
case 7:
_context.next = 9;
// await foo()
return foo();
case "end":
return _context.stop();
}
}
}
- 可知每次 yield 对应着一个 switch case,每次都会 return,自然每次 yield 完后就“卡住了”
三、协作
- 由 case return 可知 Generator 让权,就是主动执行别的 Generator,并退出自己的状态
- 同理 foo Generator 也是 switch case 这种结构
- 先看一下 babel 是如何编译 async 函数的,可以看到
_asyncToGenerator
,这其实就是自动执行。其次可以大概猜出 regeneratorRuntime.mark
函数返回的其实就是 polyfill 的 Generator - 所以 foo 执行 switch 完,经过一些内部操作把
{ value: "wangshun", done: true }
作为了 mark 函数的返回值,并交给 _asyncToGenerator 使用,_asyncToGenerator调用 promise.then(next)
继续执行 - gen 函数也是这样,等待 foo resolve,然后 gen 返回
{ value: xxx, done: false }
,继续 next
function _foo() {
_foo = _asyncToGenerator(
regeneratorRuntime.mark(function _callee2() {
return regeneratorRuntime.wrap(function _callee2$(_context2) {
switch (_context2.next) {
case 0:
_context2.next = 2;
return "literal";
case "end":
return _context2.stop();
}
}, _callee2);
})
);
return _foo.apply(this, arguments);
}
总结一下,父级 gen 函数执行到一个 case,将子 foo 函数的返回值作为本次结果,然后将自己卡住(其实就是在 co 层面等待子 promise resolve), foo 执行完后返回 done true,并结束自己的状态生涯,再将自己 co 层面的 Promise resolve,gen 卡住的 Promise 收到了 foo 的结果,本次返回 done false,开启下一轮 next,并重新通过 context.next 进入到对应 case 中
四、mark、wrap、Context
- mark 函数其实就是接受一个函数并改变成Generator其本质就是继承GeneratorFunctionPrototype
function mark(genFn: () => void) {
return _inheritsLoose(genFn, GeneratorFunctionPrototype);
}
function _inheritsLoose(subClass, superClass) {
Object.setPrototypeOf(subClass, superClass);
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
return subClass;
}
- 每个 wrap 会创建一个 context 来管理状态以及上下文参数,每次执行 case 时会先打个快照,防止 yield 完后参数更改
- mark 函数的 next、return、throw 最终调用是 wrap 的能力,因为实际是 wrap 是调用(switch case)和 context,所以GeneratorFunctionPrototype里用_invoke链接warp,自己只负责传递 type 和 args
type GeneratorMethod = "next" | "return" | "throw";
class GeneratorFunctionPrototype {
private _invoke: (method: GeneratorMethod, args) => { value: any, done: boolean };
// 注意这是原型方法哦
next(args) {
return this._invoke("next", args);
}
return(args) {
return this._invoke("return", args);
}
throw(args) {
return this._invoke("throw", args);
}
}
五、yield*
上面提到await、async 舍弃 Generator 是监听到另一个 Generator 的执行过程,也就是说使用await过程中并不知道执行了多少await
async function a() {
const res = await b();
}
async function b() {
await 1;
await 'str';
return { data: 'lawler', msg: 'ok' };
}
上面的代码可以验证
但是 yield 是通过 delegateYield 方法接替了 foo,在 context 内部循环运行,使得这次 yield 在一个 case 中完成(可以在babel中写一个yield genFn()试一下就能看出来)
function gen$(_context) {
switch (_context.next) {
case 0:
_context.next = 7;
return wait(10);
case 7:
// 传递 foo generator object 给 gen 的 context
return _context.delegateYield(foo(), "t2", 8);
case "end":
return _context.stop();
}
}
wrap 里面,循环执行
generator._invoke = function invoke(method, args) {
context.method = method;
// yield* genFn 时使用,循环返回 genFn 迭代的结果,直到 return
while (true) {
const delegate = context.delegate;
if (delegate) {
const delegateResult = maybeInvokeDelegate(delegate, context);
if (delegateResult) {
if (delegateResult === empty) continue;
// 传出内部迭代结果 { value, done }
return delegateResult;
}
}
}
if (method === "next") {}
}