您的位置:首页 > 房产 > 家装 > forEach 和 for...of... 在遍历内部存在异步操作的区别

forEach 和 for...of... 在遍历内部存在异步操作的区别

2024/10/5 22:23:40 来源:https://blog.csdn.net/XiugongHao/article/details/140959586  浏览:    关键词:forEach 和 for...of... 在遍历内部存在异步操作的区别

起先是因为一段代码:

const formatUserInfo = async (id) => {const result = await getUserInfoByIdAPI(id)return result.data.data
}
const getReturnSchoolInfoList = async () => {const result = await getReturnSchoolInfoListAPI(page.value, limit.value)count.value = result.data.data.countreturnSchoolInfoList.value = result.data.data.rows// todo 根据userId 获取用户信息 并与返校信息合并returnSchoolInfoList.value.forEach(item => {const result1 = await formatUserInfo(item.userId)console.log(result1)item.userInfo = result1})console.log(returnSchoolInfoList.value)
}

然后报错: [vite] Internal server error: [vue/compiler-sfc] Unexpected reserved word ‘await’.。

如果去掉 await ,那么由于是异步操作会先输出 returnSchoolInfoList.value,再输出 result1,并且因为赋值的时候并没有获取到result1 的具体值,所以需等待该异步操作完成后再进行赋值。

然后幸好有 Webstorm 的智能提示,让我使用 for…of… 代替 forEach,bug 果然消失了 !

const formatUserInfo = async (id) => {const result = await getUserInfoByIdAPI(id)return result.data.data
}
const getReturnSchoolInfoList = async () => {const result = await getReturnSchoolInfoListAPI(page.value, limit.value)count.value = result.data.data.countreturnSchoolInfoList.value = result.data.data.rows// todo 根据userId 获取用户信息 并与返校信息合并for (const item of returnSchoolInfoList.value) {const result1 = await formatUserInfo(item.userId)console.log(result1)item.userInfo = result1}console.log(returnSchoolInfoList.value)
}

并且等待异步完成后,正确赋值了!

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com