在工作中有时候会遇到这样的需求一个页面有多个区域，每个区域根据不同的条件去后台查同一个接口。
当我调用此接口两次的时候，其中一个是不会生效的，甚至network中你会发现只发了一次请求，
后来我试了一下调第二个方法的时候放在setimeOut中，时间是1000ms问题解决，但是改成100，接口会报错（cancel)后台没有任何的响应不知道状态码，个人猜测是浏览机制引起的。
也想过在第一次接口请求成功后在调一次该接口。这样写不优雅 回到地狱比较low。
后来我换成了async await的方式解决了该问题
watch: {
‘qualityModel.modelCode‘: {
async handler(val) {
this.modelCode = ‘‘;
this.uniqueConstList = [];
this.connConstList = [];
this.uniqueConst.removeAll;
this.connConst.removeAll;
if (val) {
this.modelCode = val;
await this.getUniqueConstList();
await this.getConnConstList();
}
},
deep: true
}
methods:{
// 获取所有唯一约束
async getUniqueConstList() {
let param = { modelCode: this.modelCode, type: ‘0‘ };
let response = await Rule.getConstraintList(param, 0);
response.data.forEach(item => {
item.check = false;
item.constraintCheckRemindLimit = 30;
item.constraintCheckWarnLimit = 50;
this.qualityModelConstEntityList.forEach(ids => {
if (ids.constId === item.id) {
item.check = true;
item.constraintCheckRemindLimit = Number(
ids.constraintCheckRemindLimit
);
item.constraintCheckWarnLimit = Number(
ids.constraintCheckWarnLimit
);
}
});
});
this.uniqueConstList = response.data;
},
// 获取所有关联约束
async getConnConstList() {
let param = { modelCode: this.modelCode, type: ‘1‘ };
let response = await Rule.getConstraintList(param, 0);
response.data.forEach(item => {
item.check = false;
item.constraintCheckRemindLimit = 30;w
item.constraintCheckWarnLimit = 50;
this.qualityModelConstEntityList.forEach(ids => {
if (ids.constId === item.id) {
item.check = true;
item.constraintCheckRemindLimit = Number(
ids.constraintCheckRemindLimit
);
item.constraintCheckWarnLimit = Number(
ids.constraintCheckWarnLimit
);
}
});
});
this.connConstList = response.data;
}
}
具体的async await代码贴上
原文：https://www.cnblogs.com/tw6668/p/13321498.html