async-await的循环请求数据

循环按顺序请求数组中的接口
——async-await的循环请求数据，并弹窗实现告知用户请求结果

1.forEach+async-await循环遍历数组的子项形成参数请求接口

rateIds.data.forEach(item => {
	const requestData = {
		id: item,
		product_tax: rateData.productionRate,
		operator_tax: rateData.operateRate,
		market_tax: rateData.marketRate
	}
	const { error, code } = await CpListService.SaveCpTax(requestData)
	if (error || code !== 0) {
		errMessage.push(item)
	} else {
		sucMessage.push(item)
	}
})

通过这种方式请求接口之后接口都正常请求了，但是这里的arr数组输出是空，并且是在接口内容返回之前就输出了，也就是说这里的async-await并没有生效。原因是async会返回一个promise对象，而forEach没有return值，就没有环节可以去处理这个返回对promise对象，换言之就是forEach只支持同步操作不支持异步操作。（map可以试试

2.采用for-of+async-await循环遍历数组

for (const item of rateIds.data) {
	const requestData = {
		id: item,
		product_tax: rateData.productionRate,
		operator_tax: rateData.operateRate,
		market_tax: rateData.marketRate
	}
const { error, code } = await CpListService.SaveCpTax(requestData)
	if (error || code !== 0) {
		errMessage.push(item)
	} else {
		sucMessage.push(item)
	}
}

第二种方法满足实现该需求

3.采用promise+async-await的方法操作

const promises = rateIds.data.map(async (item) => {
	const requestData = {
		id: item,
		product_tax: rateData.productionRate,
		operator_tax: rateData.operateRate,
		market_tax: rateData.marketRate
	}
	const result = await CpListService.SaveCpTax(requestData)
	return result
	}
)
await Promise.all(promises)

这种方式可以实现等待所有接口请求完成之后再输入请求的内容，但是Promise.all 方法会按照并行的模式，将所有请求一次性全部发送出去，然后等待接收到全部结果后，按照顺序打印出来而已。它并不会按照顺序发送一个请求，收到结果后再发送下一个请求。