O Vue faz um loop para solicitar a mesma interface, espera que a interface retorne os dados e, em seguida, prossegue para o próximo loop para chamar a interface da API de forma síncrona.

1. Comece a usar forEach para solicitar e descubra que a interface de solicitação errada não pode ser capturada. Se houver um erro, o loop continuará a ser executado.

Hoje recebi uma solicitação que exige percorrer uma lista e solicitar a interface da API para cada linha (para atualizar os dados). A solicitação não pode ser assíncrona ou simultânea. A interface da API precisa ser classificada de forma síncrona (ou seja, enfileirada uma por um), e os dados relevantes podem ser processados ​​de maneira ordenada.

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;
							});
					}
					
						
				});

2. Mais tarde, mude para async+await+Promise para processamento.

A armadilha encontrada aqui é que new Promise((resolve, rejeitar) => {isto contém o método de pós-envio}) não é usado para converter o valor retornado em um objeto objeto para aceitação. O corpo do método que causou o loop nunca recebeu dados.

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()
						})

				})

			},

3. async + await +new Promise() chama de forma assíncrona o método da interface da API e o corpo do método

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()
						})

				})

			},

Se você precisar entender o método async+await+promise em detalhes, você pode ver
ES6 --- novo método de uso Promise()_S XiaoxiaoS sorriso quadridimensional-CSDN blog_nova promessa

おすすめ

転載: blog.csdn.net/weixin_40476233/article/details/121292970