场景一
数组遍历中每次遍历都需要去请求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 = true const 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 }) } }
好了,本文就到这里吧,点个关注再走嘛~