注視都寫到了代碼里面，方面解釋和理解矫废！
const {
log
} = console
// 先來看一下迭代器
// for await
const testAsync = (tips, time = 1000) => new Promise(res => setTimeout(() => res(tips), time))
/**
* for await ES2020新增
*/
let arr = [testAsync('我', 1000), testAsync('出', 2000), testAsync('現(xiàn)', 3000), testAsync('了', 4000)]
async function par1(a) {
for await (let key of a) {
log(key)
}
}
// par1(arr) // 測試可打開
// 看起來更便捷了吧 -- ES7
async function par2(a) {
for (let key of a) {
let res = await key
log(res, key)
// 就是then的簡化版而已
// key.then(res => {
// log(res)
// })
}
}
// par2(arr) // 測試可打開
// 先來看下genertor是什么玩意盏缤！ 除去權(quán)威指南版本，全程自我理解
function* genertorStudy() {
let data1 = yield testAsync('第一步')
log(data1, '我執(zhí)行了')
let data2 = yield testAsync('第二步了')
log(data2, '又被執(zhí)行了')
return '啊波次的呢'
}
// 以下就是(asnyc)雛形;只不過是手動化的
let pCor = genertorStudy(); // 創(chuàng)建生成器
// log(pCor) // Object [Generator] {}
let pOne = pCor.next(); // 執(zhí)行下次Func
// log(pOne) // { value: Promise { <pending> }, done: false } 第一次執(zhí)行到 yield 第一步 的promise蓖扑， so 可以拿到$.value.then這個api
pOne.value.then(resV => {
// log(resV) // log -> 第一步 /////// 這個console 是可以拿到promise的值的; 這個log執(zhí)行的是 yield testAsync('第一步')
// 這里并沒有當(dāng)做參數(shù)進(jìn)行返回到 data1 的, 所以現(xiàn)在還未執(zhí)行 36行 "log(data1)"
let pTwo = pCor.next(resV) // 36行 log(data1, '我執(zhí)行了') -> "第一步 我執(zhí)行了" //////// 這邊"pCor.next(resV)"直接把參數(shù)返回給了賦值data1, 注意 這里是 "pCor.next";這有生成器的next傳入?yún)?shù)唉铜，才回把值返回給等號（=）左側(cè)
// console.log(pTwo) // log -> { value: Promise { <pending> }, done: false } //// 這里直接拿到下一次的異步
pTwo.value.then(resv2 => {
// log(resv2) //log -> 第二步了 //// 這里拿到 37行第二個promise的執(zhí)行結(jié)果； 為賦值給data2
let pThree = pCor.next(resv2) // log -> 第二步了 又被執(zhí)行了 //// 執(zhí)行了38行代碼 依舊調(diào)用pCor
// log(pThree) // log -> { value: '啊波次的呢', done: true } //// 注意這里的done 變?yōu)閠rue了 也就是說這個Genertor執(zhí)行到此結(jié)束
if (pThree.done) {
pCor.next(pThree.value)
log(pThree.value) // 返回出去并打印
}
})
})
// 下面要把以上內(nèi)容變成自動化, 如有不理解請對比綜上代碼!
/**
* 下面就是全部的async的原理代碼了
* @param {*} fn
* @returns
*/
function _asyncToGenerator(fn) {
return function () {
var gen = fn.apply(this, arguments);
return new Promise(function (resolve, reject) {
function step(key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
return reject(error);
}
console.log(value)
if (info.done) { // genertor 的 返回值 done 代表全部執(zhí)行完成
resolve(value);
} else {
return Promise.resolve(value).then(function (value) {
return step("next", value);
}, function (err) {
return step("throw", err);
});
}
}
return step("next");
});
};
}
export default _asyncToGenerator