async-await的循环请求数据

场景:循环按顺序请求数组中的接口,之所以有这样的需要是因为我要请求一个接口,但是发送的是多个不同的参数,所以我就将参数放到一个数组中,想按照数组顺序请求接口然后将返回数据放入数组中。
当前项目中用到的是ES6语法async-await,所以就想着将存放接口的数组遍历循环请求一遍

  1. 首先想到的方法是用forEach+async-await循环遍历数组的每一项然后请求接口,具体代码如下:
	let arr = [],result
	this.tagKeyList.forEach(async item => {
        result = await leadsService({ tagKey: item })
        arr.push(result.data.data.tagKey)
        console.log(result.data.data.tagKey)  
     })
     console.log(arr)

leadsService是提前封装好的ajax请求,括号内容为请求参数,通过这种方式请求接口之后接口都正常请求了,但是这里的arr数组输出是空,并且是在接口内容返回之前就输出了,也就是说这里的async-await并没有生效,
2.第二种方案是采用for-of+async-await循环遍历数组具体的代码内容如下:

	for (let item of this.tagKeyList) {
     	result = await leadsService({ tagKey: item })
        arr.push(result.data.data.tagKey)
        console.log(result.data.data.tagKey)     
	)}
	console.log(arr)

这种情况下的输出顺序就是按照接口数组请求数据进行输出的,最后才会输出数组内容,可以达到我的需求
3.第三种思路是通过采用promise+async-await的方法操作,具体的实现代码如下:

  const promises = tagKeyList.map(async (item) => 
    result = await leadsService({ tagKey: item })
  );
  await Promise.all(promises);
  console.log('Finished!');

这种方式可以实现等待所有接口请求完成之后再输入请求的内容,但是Promise.all 方法会按照并行的模式,将所有请求一次性全部发送出去,然后等待接收到全部结果后,按照顺序打印出来而已。它并不会按照顺序发送一个请求,收到结果后再发送下一个请求。所以也不符合我所预想的结果。所以只有第二种for-of循环的方式符合我的需求。

  • 7
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值