我們使用ES7的語法 async await可以將異步函數(shù)來同步調(diào)用。 其實原理是利用了ES6的Generator娇未。我們可以封裝一個Generator的co函數(shù),來理解async await
/*
* @Author: sunxy
* @Date: 2021-07-13 22:24:35
* @LastEditors: sunxy
* @LastEditTime: 2021-07-13 23:02:13
* @Description: Generator
* @FilePath: /feir/src/components/Generator.js
*/
const myAjax = function (str) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(str)
}, 3000)
})
}
function* gen() {
console.log('-----000----')
yield myAjax('11111')
console.log('-----111----')
yield myAjax('22222')
console.log('-----222----')
yield myAjax('33333')
console.log('-----333----')
}
let g = gen()
//g() //不是一個函數(shù) g is not a function
console.log(g) // [Generator] {}
// 封裝co函數(shù) 可以使Generator順序執(zhí)行,其實 async await 函數(shù)就是Generator和co的語法糖
function co(fun) {
let f = fun()
function hander(g) {
if (g.done) return
g.value.then(res => {
console.log(res)
hander(f.next(res)) // 遞歸執(zhí)行
})
}
hander(f.next())
}
co(gen)
//執(zhí)行順序
// -----000----
// 11111
// -----111----
// 22222
// -----222----
// 33333
// -----333----
async 相當于 * 菱父; await 相當于 yield
// async 相當于 * ; await 相當于 yield
async function at(){
console.log('aaa-----000----')
await myAjax('aa11111')
console.log('aa-----111----')
await myAjax('aa22222')
console.log('aa-----222----')
await myAjax('aa33333')
console.log('aa-----333----')
}
//at() 效果與上面的一致