参考
promise 、generator、async await 三者区别和联系
- callback 不易阅读
- promise then太多,语义化差
- generator 需要next来触发函数或者靠co来执行,麻烦
- async/await 由await得到resolve状态的promise来触发继续执行代码,爽
- generator +(co) + promise = async/await
generator
es6.ruanyifeng.com/#docs/gener…
核心原理是协程
比线程更轻量级的存在,一个进程多个线程,一个线程多个协程,但线程由操作系统内核控制,协程由程序代码控制,性能更好。
一个线程同时只能执行一个协程。 遍历器对象的next方法的运行逻辑如下。 (1)遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。 (2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式。 (3)如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。 (4)如果该函数没有return语句,则返回的对象的value属性值为undefined。 从语义上讲,第一个next方法用来启动遍历器对象,所以不用带有参数。
第一个next传参无效,但是可以拿到yield表达式的值,第二个next可以将参数替换第一个yield表达式
# 第一个yield需要两次next才能继续执行完毕
function* getResult() {
3
yield 'getUserID'//2.5
5
yield 'getUserName'
7
return 'name'
}
1
let result = getResult()
2
console.log(result.next().value)
4
console.log(result.next().value)
6
console.log(result.next().value) //name
getResult
函数不是一次执行完的,而是全局代码和函数交替执行。
带星号的函数为生成器函数,当遇到yield时,v8会返回关键词后面的内容给外部函数,并暂停生成器函数的执行,控制器交给外部代码,在外部代码执行到生成器函数的next方法时,控制器再转交给生成器函数。
co
个人理解就是递归执行生成器函数的next方法,直到无法执行为止,顺便传递value值
# generator的done和value概念
function* getResult() {
yield 'getUserID'
return 'name'
}
let result = getResult()
console.log(result.next().value)
//
其中result.next().value为getUserID,
result.next().done为一个判断生成器函数里是否完成的布尔类型判断
例子:https://www.jianshu.com/p/651922749334
let a = yield x
result.next(100)//参数可以代替yield和后面的内容
得到a=100
可以将参数通过next传入生成器函数,动态调整里面的逻辑
# https://www.cnblogs.com/mengff/p/12787981.html
/**
* slice() reference.
*/
var slice = Array.prototype.slice;
/**
* Expose `co`.
*/
module.exports = co['default'] = co.co = co;
/**
* Wrap the given generator `fn` into a
* function that returns a promise.
* This is a separate function so that
* every `co()` call doesn't create a new,
* unnecessary closure.
*
* @param {GeneratorFunction} fn
* @return {Function}
* @api public
*/
co.wrap = function (fn) {
createPromise.__generatorFunction__ = fn;
return createPromise;
function createPromise() {
return co.call(this, fn.apply(this, arguments));
}
};
/**
* Execute the generator function or a generator
* and return a promise.
*
* @param {Function} fn
* @return {Promise}
* @api public
*/
//co(generatorFunc, '哎呀');
function co(gen) {
var ctx = this;
var args = slice.call(arguments, 1);//['哎呀']
// we wrap everything in a promise to avoid promise chaining,
// which leads to memory leak errors.
// see https://github.com/tj/co/issues/180
return new Promise(function(resolve, reject) {
//执行生成器函数且带参数generatorFunc('哎呀')
if (typeof gen === 'function') gen = gen.apply(ctx, args);
if (!gen || typeof gen.next !== 'function') return resolve(gen);//非generator,返回
//先generatorFunc('哎呀').next一次
onFulfilled();
/**
* @param {Mixed} res
* @return {Promise}
* @api private
*/
function onFulfilled(res) {
var ret;
try {
ret = gen.next(res);//generatorFunc('哎呀').next()的结果
} catch (e) {
return reject(e);
}
next(ret);//generatorFunc('哎呀').next()的结果 在next函数里执行
return null;
}
/**
* @param {Error} err
* @return {Promise}
* @api private
*/
function onRejected(err) {
var ret;
try {
ret = gen.throw(err);
} catch (e) {
return reject(e);
}
next(ret);
}
/**
* Get the next value in the generator,
* return a promise.
*
* @param {Object} ret
* @return {Promise}
* @api private
*/
function next(ret) {
//如果生成器函数没yield了,返回resolve(ret.value)
if (ret.done) return resolve(ret.value);
//将generatorFunc('哎呀').next()的结果的value值封装成promise
var value = toPromise.call(ctx, ret.value);
//套娃开始,直到生成器函数没yield了,返回resolve(ret.value)
if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
+ 'but the following object was passed: "' + String(ret.value) + '"'));
}
});
}
/**
* Convert a `yield`ed value into a promise.
*
* @param {Mixed} obj
* @return {Promise}
* @api private
*/
function toPromise(obj) {
//obj为字符串时,报错,要求用其他类型,有时候不去试一下真不知道为什么这里不判断字符串
if (!obj) return obj;
if (isPromise(obj)) return obj;
if (isGeneratorFunction(obj) || isGenerator(obj)) return co.call(this, obj);
if ('function' == typeof obj) return thunkToPromise.call(this, obj);
if (Array.isArray(obj)) return arrayToPromise.call(this, obj);
if (isObject(obj)) return objectToPromise.call(this, obj);
return obj;
}
// 当你yield一个字符串时,由于不是promise且co没做字符串的转化,会触发reject
// let fn = function (cb) {
// console.log('fnxx')
// cb && cb(null, '123', '2', '3')
// return 'fn'
// }
// let genera = function* () {
// yield 'err'
// let value = yield fn
// return value
// }
// co(genera)
//UnhandledPromiseRejectionWarning: TypeError: You may only yield a function, promise,
//generator, array, or object, but the following object was passed: "err"
/**
* Convert a thunk to a promise.
*
* @param {Function}
* @return {Promise}
* @api private
*/
//fn需为fn=(cb)=》{cb(null,'res')}这样的才能触发下面的2函数
function thunkToPromise(fn) {
var ctx = this;
return new Promise(function (resolve, reject) {
//http://qiutianaimeili.com/html/page/2019/05/54g0vvxycyg.html 涉及thunk
fn.call(ctx, function (err, res) {
//2
if (err) return reject(err);
if (arguments.length > 2) res = slice.call(arguments, 1);
resolve(res);
});
});
}
/**
* Convert an array of "yieldables" to a promise.
* Uses `Promise.all()` internally.
*
* @param {Array} obj
* @return {Promise}
* @api private
*/
function arrayToPromise(obj) {
return Promise.all(obj.map(toPromise, this));
}
/**
* Convert an object of "yieldables" to a promise.
* Uses `Promise.all()` internally.
*
* @param {Object} obj
* @return {Promise}
* @api private
*/
function objectToPromise(obj){
var results = new obj.constructor();
var keys = Object.keys(obj);
var promises = [];
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var promise = toPromise.call(this, obj[key]);
if (promise && isPromise(promise)) defer(promise, key);
else results[key] = obj[key];
}
return Promise.all(promises).then(function () {
return results;
});
function defer(promise, key) {
// predefine the key in the result
results[key] = undefined;
promises.push(promise.then(function (res) {
results[key] = res;
}));
}
}
/**
* Check if `obj` is a promise.
*
* @param {Object} obj
* @return {Boolean}
* @api private
*/
function isPromise(obj) {
return 'function' == typeof obj.then;
}
/**
* Check if `obj` is a generator.
*
* @param {Mixed} obj
* @return {Boolean}
* @api private
*/
function isGenerator(obj) {
return 'function' == typeof obj.next && 'function' == typeof obj.throw;
}
/**
* Check if `obj` is a generator function.
*
* @param {Mixed} obj
* @return {Boolean}
* @api private
*/
function isGeneratorFunction(obj) {
var constructor = obj.constructor;
if (!constructor) return false;
if ('GeneratorFunction' === constructor.name || 'GeneratorFunction' === constructor.displayName) return true;
return isGenerator(constructor.prototype);
}
/**
* Check for plain object.
*
* @param {Mixed} val
* @return {Boolean}
* @api private
*/
function isObject(val) {
return Object == val.constructor;
}
next函数的内部代码,一共只有四行命令。
第一行,检查当前是否为 Generator 函数的最后一步,如果是就返回。
第二行,确保每一步的返回值,是 Promise 对象。
第三行,使用then方法,为返回值加上回调函数,然后通过onFulfilled函数再次调用next函数。
第四行,在参数不符合要求的情况下(参数非 Thunk 函数和 Promise 对象),将 Promise 对象的状态改为rejected,从而终止执行。
简易实现版
co(generatorFun,'params')
function co(gen){
let ctx = this
let params = Array.prototype.slice.call(argumengt,1)
return new Promise((resolve,reject)=>{
gen = gen.apply(ctx,params)
onFulfilled()
function onFulfilled(res){
let ret = gen.next(res)
next(ret)
}
function next(ret){
let {value,done} = ret
if(done){
return resolve(value)
}else{
return Promise.resolve(value).then(onFulfilled)
}
}
})
}
川哥版
# https://github1s.com/lxchuan12/koa-analysis/blob/master/koa/examples/co-generator/co-simple-3.html
function coSimple(gen){
const ctx = this;
const args = Array.prototype.slice.call(arguments, 1);
gen = gen.apply(ctx, args);
console.log(gen, 'gen');
return new Promise((resolve, reject) => {
onFulfilled();
function onFulfilled(res){
const ret = gen.next(res);
next(ret);
}
function next(ret) {
const promise = ret.value;
promise && promise.then(onFulfilled);
}
});
}
阿君版
#https://www.yuque.com/ruochuan12/bssbzg/ci77ui
const co = gen => new Promise((resolve, reject) => {
function next(data) {
let { value, done } = gen.next(data);
if (done) {
resolve(value);
} else {
Promise.resolve(value).then(next, reject);
}
}
next(); // 这里需要自执行一次,然后不断递归调用
})