vue循环请求同一个接口，等接口返回数据之后在进行下次循环，同步调用api接口方式

一、开始用forEach的方式去请求，发现无法捕获到错误的请求接口，有错误也会循环也会继续执行let refreshParam = []; // 获取用户的设备列表refreshParam.forEach( (param,index)=>{console.log("refreshParam[index]")console.log(refreshParam[index])if(index &l

终极一泽

27683人浏览 · 2021-11-12 17:54:48

终极一泽 · 2021-11-12 17:54:48 发布

一、开始用forEach的方式去请求，发现无法捕获到错误的请求接口，有错误也会循环也会继续执行

今天接到一个需求需要循环一个列表的并每行都去请求api接口（进行刷新数据），请求时不能异步和并发，需要同步排序请求api接口（就是一个一个排队请求），有序处理相关数据。

let refreshParam = []; // 获取用户的设备列表
refreshParam.forEach( (param,index)=>{
					console.log("refreshParam[index]")
					console.log(refreshParam[index])
					if(index <= refreshIndex){
						// 提交刷新设备
						this.$http
							.post(this.$apis.bizFreshauths,param)
							.then(resp => {
								console.log("提交刷新后返回结果")
								console.log(resp)
								
								let code = resp.returnInfo.code;
								if (code == 0) {
									//console.log('成功了');
									
									setTimeout(() => {
										// 测试机测试不用刷新页面
										//this.$emit("refreshFrozenList")
										// 判断是否最后一个设备刷新成功
										if(index == refreshIndex){
											uni.showToast({
												title: '刷新设备成功！',
												icon:'../../../static/checkBreakdown/ic_progress_ok.png',
												duration: 3000
											});
										}
										
									},2000)
									
									
								} else {
									this.$util.feeback.showToast({title:"温馨提示 :设备号"+refreshParam[index].servid+"刷新授权提交失败"})
									return;
								}
								
							})
							.catch(error => {
								this.$util.feeback.showToast({title:"温馨提示 :刷新授权提交失败"})
								return;
							});
					}
					
						
				});

二、后面切换成async+await+Promise的方式去处理

这里遇到的坑，就是没有用new Promise((resolve, reject) => { 这里包含post提交的方法 })把返回的值转换为一个object对象接受。导致循环的方法体一直接收不到数据。

async clickRefreshParams(parameter) {
				let refreshParam = []; // 获取用户的设备列表
				let servDetailsList = JSON.parse(JSON.stringify(this.serv.servDetails)); // 设备基础信息
				/* console.log("servDetailsList")
				console.log(servDetailsList) */
				// 重构设备数据列表
				servDetailsList.forEach((DetailsList, index) => {
					refreshParam.push({
						'servid': DetailsList.servid, 
						'permark': DetailsList.permark, 
						'patchid': DetailsList.patchid,
						'whladdr': DetailsList.addr, 

						'keyno': DetailsList.keyno, 
						'logicstbno': DetailsList.stbno,
						'houseid': DetailsList.houseid, 
						'custid': this.custInfo.custid, 
						'name': this.custInfo.pwdcustname, 
						'areaid': DetailsList.areaid, 

						'descrip': "", // 备注
					})
				});

				// 循环刷新设备
				//console.log(refreshParam.length)
				let refreshIndex = refreshParam.length - 1; // 刷新次数索引
				// 用forEach的方式刷新太快，无法通过延时知道那个接口失败了。现在改用循环+async+await+Promise的方式进行设备刷新。
				let refreshSum = 0; // 刷新次数
				for (let i = 0; i <= refreshIndex; i++) {
					let param = refreshParam[i];
					refreshSum = i;
					let refreshResultValue = await this.commitRefresh(param, refreshIndex);
					

					if (this.refreshResultValue.returnInfo.code == 0) {
						// 判断是否全部设备刷新完成
						if (refreshSum == refreshIndex) {
							uni.showToast({
								title: '刷新设备成功！',
								icon: 'success',
								duration: 2000
							});
						}
						continue;
					} else {
						uni.showToast({
							title: '设备号：' + refreshParam[refreshSum].servid + ' 刷新失败！',
							icon: 'error',
							duration: 2000
						});
						return;
					}
				}

			

			},

			// api提交刷新方法
			commitRefresh(param, refreshIndex) {
				var refreshResult = this
				return new Promise((resolve, reject) => {
					// 提交刷新设备
					this.$http
						.post(this.$apis.bizFreshauth, param)
						.then(resp => {
							console.log("提交刷新后返回结果")
							console.log(resp)
							this.refreshResultValue = resp;
							let code = resp.returnInfo.code;
							if (code == 0) {
								// 判断是否最后一个设备刷新成功
								//if(i == refreshIndex){
								//}
							}
							resolve()
						}).catch((res) => {
							this.$util.feeback.showToast({
								title: '温馨提示 :设备号' + refreshParam[refreshIndex].servid + '调用刷新接口失败！'
							})
							reject()
						})

				})

			},

三、async + await +new Promise()异步调用api接口方式、方法体

async 方法名(parameter) {
				

					let 返回结果集 = await this.commitRefresh(param, refreshIndex);
					
					if (this.返回结果集.returnInfo.code == 0) {
						// 判断是否全部设备刷新完成
						if (refreshSum == refreshIndex) {
							uni.showToast({
								title: '刷新成功！',
								icon: 'success',
								duration: 2000
							});
						}
						continue;
					} else {
						uni.showToast({
							title: '刷新失败！',
							icon: 'error',
							duration: 2000
						});
						return;
					}
				}

			

			},

			// api提交刷新方法
			commitRefresh(param, refreshIndex) {
				// resolve() 成功的放回值
                // reject()  失败的放回值
                // 返回的结果必须是new Promise()包装的对象，否则无法获取放回值对象
				return new Promise((resolve, reject) => {
					this.$http
						.post(url, param)
						.then(resp => {
							
							resolve()
						}).catch((res) => {
							
							reject()
						})

				})

			},

如需要详细理解async+await+promise方法可查看
ES6---new Promise()使用方法_S筱潇S四维Smile-CSDN博客_new promise