vue循环请求同一个接口，等接口返回数据之后在进行下次循环，同步调用api接口方式
一、开始用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