【es6】async、await原理
2023-12-26 06:18:03
async、await是es6新出的,主要是为了解决多个promise函数产生的嵌套层级过多的问题。
async、await是基于generator实现的代码中断操作(上一个await未处理完时,代码不会继续向下执行,看上去就是中断了代码)
generator:
generator和普通function函数区别在于function之后有个*来告诉js这是generator函数,然后代码内部由yield把代码分割成若干个片段。通过generator执行后的返回值.next()去一个一个按顺序执行。
:next函数也是可以接受参数的,它的参数就是yield函数的返回值。
f.next()返回值是当前执行的yield后面代码的值,不要return,自动返回。
实现async await
先用setTimeout实现一个异步函数:awaitFn
function awaitFn(backData){
return function(callBack){
setTimeout(()=>{callBack(++backData)},1000)
}
}
再用Generator实现一个asyncFn函数,模拟async await代码结构:
function* asyncFn(){
let res=yield awaitFn(0);
console.log(res,'第一次')
res=yield awaitFn(res);
console.log(res,'第二次')
res=yield awaitFn(res);
console.log(res,'第三次')
res=yield awaitFn(res);
console.log(res,'第四次')
}
最关键的一步,通过generator函数的特性,写一个递归函数来实现async await
function init(fn){
const f=fn();
function next(data){
const res=f.next(data);
if(res.done) return res.value;
res.value((backData)=>{
next(backData);
})
}
next();
}
init(asyncFn)
文章来源:https://blog.csdn.net/manerzi/article/details/135211515
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!