async和await是es7语法,在babel中会被转译,我们看一下专一前和转译后的源码:
async function p (){
await console.log('xx')
}
p()
async function w (){
console.log('xf')
}
转译后:
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function p() {
return _p.apply(this, arguments);
}
function _p() {
_p = _asyncToGenerator(function* () {
yield console.log("xx");
});
return _p.apply(this, arguments);
}
p();
function w() {
return _w.apply(this, arguments);
}
function _w() {
_w = _asyncToGenerator(function* () {
console.log("xf");
});
return _w.apply(this, arguments);
}
先解读下p函数,运行p函数就是运行_p函数,运行_p函数会返回里面的_asyncToGenerator函数。
_asyncToGenerator这个函数里面包了一个function*也就是生成器函数,通俗的说,就是将p函数给造成了function*函数。
再来仔细看下这个函数干了啥,这个函数返回一个函数,而这个返回的函数执行会返回一个传入的fn的返回值也就是那个生成器函数的返回值,这个生成器返回值第一次是这个生成器,第二次是它的yield语句,把返回结果做成gen,相当于
function * myfunc(){
yield console.log('myfunc')
}
gen = myfunc()
gen['next'](参数)//后面函数调用即可打印函数里yield语句
然后运行它里面定义的asyncGeneratorStep函数。
这个函数就比较简单了,注意上面例子的那段话,它就是用trycatch试着运行它的next,也就是function的yield,生成器函数会有done属性,如果完成了done就是true,如果没完,把返回值利用promise.resolve包裹起来递归。
再来看一下w函数,也就是没有加上await的在function*的生成器函数里就会以正常代码存在,如果有yield穿插,看在yield的什么位置,也就是看await的位置。
最后再梳理下整个过程,运行p函数>运行_p返回内部_p运行结果——也就是个递归Promise对象,这个对象会自动执行生成器yield,直到运行完。
async和await确实也算是Promise的语法糖,但实际是promise包裹了generator的语法糖。 源码中使用的特殊技巧: 这个Promise包裹的非常特别,是一个递归一直next直到没有yield才进行resolve的promise,如果下面还有yield,那么就调用Promise.resolve来递归。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。