vue循环请求同一个接口，等接口返回数据之后在进行下次循环，同步调用api接口方式 |
您所在的位置：网站首页 › foreach最后一次 › vue循环请求同一个接口，等接口返回数据之后在进行下次循环，同步调用api接口方式 |
|
一、开始用forEach的方式去请求，发现无法捕获到错误的请求接口，有错误也会循环也会继续执行
今天接到一个需求需要循环一个列表的并每行都去请求api接口（进行刷新数据），请求时不能异步和并发，需要同步排序请求api接口（就是一个一个排队请求），有序处理相关数据。 let refreshParam = []; // 获取用户的设备列表 refreshParam.forEach( (param,index)=>{ console.log("refreshParam[index]") console.log(refreshParam[index]) if(index { 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 { // 提交刷新设备 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 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |