promise.all实际开发中应用-数组对象循环内容后请求接口

promise.all:适用于处理多个异步任务,并且所有的异步任务都得到结果时,才会返回。

本文介绍应用场景:
表格展示图片,但是列表返回数据返回的是图片id,图片展示,需要请求另外一个接口,获取图片展示地址。

用专业术语拆分一下:
1.列表返回的是数组对象(下文代tableList),每个对象里都包含图片id(下文代imgId),
2.我们需要循环tableList,拿到imgId后请求【获取图片在线地址】接口。
3.全部请求返回后,重新存入tableList,便于列表直接展示图片。

使用promise.all的原因是,要等所有【获取图片在线地址】接口返回后,赋值给tableList,进行页面展示。
当前是vue项目上代码


//获取tableList
		getphotoList() {
			treeApi.getphotoTree(this.checkTreeData.id).then((response) => {
				
				let data = response.data;
				  //获取tableList
			
				 this.handleTableData(data);
				
			});
		},
		//处理
	    async handleTableData(data) {
			const updateArr =await Promise.all(data.map(async(obj) =>{
				const imgId = obj.imgId;
				//获取图片id请求
				const resimg = await this.getDownloadUrl(imgId)
				return {
					...obj,
					//存入数组内
					imgUrl:resimg
				}
			}))	
			  //赋值给tableList
            this.tableList = updateArr
		},
		//请求图片地址接口
		async getDownloadUrl(id) {
			return new Promise((resolve, reject) => {
				//请求内部,省略
			});
		},
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
foreach 循环调用接口会有异步请求的问题,可能会导致数据顺序错乱或者出现其他问题。为了解决这个问题,可以使用 Promise.all 来处理异步请求Promise.all 可以接收一个由 Promise 对象组成的数组作为参数,当所有的 Promise 对象都成功执行时,Promise.all 才会返回一个成功的 Promise 对象;如果其任意一个 Promise 对象失败,Promise.all 就会返回一个失败的 Promise 对象。 下面是一个使用 Promise.all 解决异步请求问题的示例代码: ``` const ids = [1, 2, 3, 4, 5]; const promises = []; ids.forEach(id => { const promise = fetch(`/api/data/${id}`).then(response => response.json()); promises.push(promise); }); Promise.all(promises) .then(results => { console.log(results); }) .catch(error => { console.log(error); }); ``` 在上面的代码,我们使用 forEach 循环遍历了一个包含 5 个数据 id 的数组,然后将每个 id 传递给 fetch 函数发起异步请求,将返回的 Promise 对象添加到 promises 数组。最后使用 Promise.all 来处理这些 Promise 对象,当所有的 Promise 对象都成功执行时,Promise.all 返回一个包含所有结果的数组。如果其任意一个 Promise 对象失败,Promise.all 就会返回一个失败的 Promise 对象。 这样使用 Promise.all 可以保证所有异步请求都成功执行并按顺序返回结果,避免了因为异步请求导致数据顺序错乱或者出现其他问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值