最近项目中 asyn & await 用的比较多,所以特地去了解,模仿一下实现~
先来看看 使用 async & await 的方法
async function d () {
try {
const a = await Promise((resolve, reject) => {
setTimeout(reject, 2000 + Math.random() * 3000)
setTimeout(resolve, 2000 + Math.random() * 3000)
})
console.log(a)
} catch (e) {
console.log(e)
}
}
d()
通过 async 是通过使用生成器配合yield方法模拟的一个同步JS操作,这个技术有效的避免了传统回调和promise形成的回调地狱~。async必须用在函数上,使用方法如上。在需要停止的地方加上 await 关键字,结果会根据promise的决议来决定,如果是resolve那么就会继续执行下去,否则会抛出异常,可以由try & catch捕捉。
下面是模拟async & await 的实现方法的demo
void function () {
function *p () {
try {
const a = yield new Promise((resolve, reject) => {
setTimeout(reject, 2000 + Math.random() * 3000)
setTimeout(resolve, 2000 + Math.random() * 3000)
})
if (a instanceof Error) throw a
console.log('success', a)
} catch (e) {
console.log('error ', e)
}
}
// 执行 p 生成器
let c = p()
// 执行 each 遍历生成器所有 yield
function each (res) {
// 执行第一个 yield
const r = c.next(res)
// 如果还有后续 等待 then 方法回调 继续执行 遍历
if (!r.done) {
r.value.then(res=>{
each(res)
}).catch(e=>{
// 如果报错 则返回 错误信息
each(new Error(e))
})
}
}
each()
}()
通过生成器和promise配合可以在then回调的时候继续执行函数。c.next()执行后在第一个yield地方停顿并且返回yield后面的Promise,如果返回的done是true则代表函数执行结束,否则就监听then方法回调。然后递归调用自身一路next直到done为true~
总结一下
async & await是同步执行异步流程的解决方案,这个方案和Promise是紧密结合的,是基于Promise的一层封装。所以配合Promise的方法可以更好的解决异步流程~如果有什么不对的地方,盼望您能底部留言,感激不尽~