js 数组for循环请求接口，并把返回数据放进新数组

来源：叨叨游戏网

需求：用一个数组中的每个值去循环请求接口，获取对应数据放进新数组

举个栗子可能更好理解：老师想知道每个同学的成绩，然后有个接口是需要用同学的id去拿到对应的分数。

那么，已知数组是：

[1, 2, 3, 4] // 同学id数组

目标数组是：

[
	{ id: 1, name: '张三', score: 98 },
	{ id: 2, name: '李四', score: 99 },
	{ id: 3, name: '王五', score: 99 },
	{ id: 4, name: '老六', score: 100 },
]

解决：

使用 async，await


methods: {
	async handleGoods(arr) {
      	let idArr = [1, 2, 3, 4];
		let scoreArr = [];
		for (let i = 0; i < idArr.length; i++) {
	  		let data = await this.getScore(i);
	  		scoreArr.push({
	    		id: idArr[i],
	    		name: data.name,
	    		score: data.score,
	  		})
		}
    },
    
	async getScore(id) {
		return await new Promise((resolve, reject) => {
			// 请求接口
			getScore({
				id: id,
        	}).then(res => {
          		resolve(res.data);
        	}).catch(() => {
          		reject({});
        	})
      	});
    },
}

总结：

要在循环中使用async、await，可以使用for…of 或者 for 循环, while循环等，不能使用foreach，因为在 forEarch 里执行 await 会并行的。