ES6 -async函数

情形:
子组件中用了一个Table组件,有datasoure和columns两个属性,datasource 中的数据是在父组件调用接口取得,再通过props传递给子组件,可是出现了一种问题,在columns中取到的数据是空的,这是因为datasource 中的数据是通过for循环,多次调用接口取到的,然后调接口是一个异步操作,在接口的数据还没有成功返回之前,就已经执行了setState,所以传过去的数据是空的,但是如果你console打出来的数据是有的,因为到控制台输出数据的时候,接口调用已经结束了。
所以为了解决这种多次调用接口获得数据的情况,需要使用 async函数。

async的几种用法

  1. forEach 后的 await 是并发操作
  2. for循环 是继发操作,就是按顺序执行
  3. Promise.all 是并发执行

// 1. forEach async要写在里面
  el.ids.forEach(async function (e) {
     newInfo.info.push(
      await this.getUserInfo(e)
    );
  });
 
// 2.for循环中 this.getUserInfo()函数是继发执行,就是按顺序执行
 for (const e of el.ids) {
    newInfo.info.push(
      await this.getUserInfo(e)
    );
  }
  
// 3.调用 Promise.all 方法就会并发执行
const promises = el.ids.map((e) => this.getUserInfo(e));
newInfo.info = await Promise.all(promises);
      

async的注意点:

  1. 多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发
  2. async和await必须要一起使用
  3. await命令后面是一个 Promise 对象
  4. await命令只能用在async函数之中,如果用在普通函数,就会报错
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值