async await 在循环中对异步方法中的使用

73 阅读1分钟

背景

在循环中请求异步方法,在常规使用中异步方法执行的顺序不可控制,再各个异步方法需要各自的返回参数时,当下一个异步方法执行需要上一个方法返回的参数,可能下一个异步方法会优先执行,造成报错

async await 异步方法请求成功后再执行下一次循环,使得异步顺序强制变为同步(同步大于异步,同步方法执行结束后再执行异步)

示例代码

// 获取评论数据
const getData = async () => {
	try {
		// 等待获取了返回的数据再执行下一步
		const res = await getFeed({
			softId: route.query.softId,
			userId: useID,
		})
		// 重置数据
		myFeedback.value = []

		for (let index = 0; index < res.data.records.length; index++) {
			const item = res.data.records[index]
			myFeedback.value.push(item)

			// 在数据中添加评论量字段   等待获取了返回的数据再执行下一步
			myFeedback.value[index].number = await getNum(item.id)
		}
	} catch (error) {
		console.error('Error fetching data:', error)
	}
}

// 获取评论量
const getNum = async (id: any) => {
	try {
		// 等待获取了返回的数据再执行下一步
		const res = await getCommentNum({
			softId: Number(route.query.softId),
			userId: useID,
			feedBackId: id,
		})

		return res.data
	} catch (error) {
		console.error('Error fetching comment number:', error)
		return 0
	}
}