【es6】async、await原理

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) 
  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值