🌈🌈🌈目录

场景一

解决 

场景二

解决

场景一

数组遍历中每次遍历都需要去请求getStaffCover接口，拿到该接口的结果拼接到数组的每一项，等到数组遍历完之后，拿到拼接好的数组。拼接的数组必须是最终遍历的结果，所以得等到所有的请求结束之后进行操作，使用map可以返回每一次异步请求的Promise合集，注意这里不需要return，然后使用Promise.all等待执行完所有的异步操作，然后才会执行后面的代码

解决 

 const promise = nv.aiFaceData.items.map(async item => {const timelines = [];let cover, name;!isEmpty(item.existTime.items) &&item.existTime.items.forEach(val => {timelines.push({start: val.startTime,duration: val.endTime - val.startTime});});if (get(item, 'staffId')) {cover = await this.getStaffCover(item.staffId);name = item.staffBase.name;} else {name = this.getMobileNumber(item.mobileNumber); //如果不是该组织人员,显示手机号}const itemData = {info: {name,cover},timelines: cloneDeep(timelines)};aiData.push(itemData);});await Promise.all(promise);this.aiData = cloneDeep(aiData);

场景二

用forEach遍历接口请求时，当所有接口都响应完毕后，关闭loading加载

解决

methods: {handleAdd (arr) {this.loading = trueconst allApi = []arr.forEach((item, index) => {const data = {id: item.id,name: item.name}const oneApi = api.add(data).then(res => {if (res.error_code === 0) {this.$message.success(res.msg)} else {this.$message.error(res.msg)}})allApi.push(oneApi)})Promise.all(allApi).then(() => {this.loading = false})}
}

好了，本文就到这里吧，点个关注再走嘛~

🚀 个人简介：6年开发经验，现任职某国企前端负责人，分享前端相关技术与工作常见问题~
💟 作    者：前端菜鸟的自我修养❣️
📝 专    栏：GIS地图与大数据可视化
🌈 若有帮助，还请关注➕点赞➕收藏，不行的话我再努努力💪💪💪