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