版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/nrsc272420199/article/details/88030150
问题描述
//根据过渡期合同号获得合同基本信息+政策
getAndSetPolicies(param) {
//根据过渡期合同号查询后端
this.$api.getPeriodContractInfo(param).then(res => {
//为查到的合同基本信息赋值---假设为方法A
this.setBaseInfoByPeriodContractNum(res.response)
//为政策赋值----假设为方法B
this.$emit("transientContractChange", this.responseFormPeriodContract);
}
测试发现上面的代码如果去掉方法A,方法B可以获得正确的结果,但是方法A和方法B都存在的情况下,方法B会失效,打断点发现在运行到下面的方法(此方法应是Vue封装的方法)时,方法B被赋上的数据会被清空---->具体原因我不知道.但是想到既然只有方法B时,方法B可以获得正确的结果,于是想着可以把方法A和方法B隔开来执行
解决方式1
基于以上的思考,试着写了下面的代码,发现果然可行,这里记为解决方式1
getAndSetPolicies(param) {
this.$api.getPeriodContractInfo(param).then(res => {
//为查到的合同基本信息赋值---假设为方法A
this.setBaseInfoByPeriodContractNum(res.response)
}).finally(() => {
//为政策赋值----假设为方法B
this.$emit("transientContractChange", this.responseFormPeriodContract);
})
}
解决方式2
回顾上面思考与解决问题的过程,其实不难发现上面的问题其实可以归纳为下面的问题:
- 前端如何确保方法B一定在方法A执行完再执行
2.1Promise
具体原理不深究,这里做了一个小demo,演示一下如何使用Promise来解决该问题
methodA() {
console.log("我是AAAA")
return Promise.resolve("ok"); //方法A执行完,.then()可以调到的内容
},
methodB() {
console.log("我是BBB")
},
/**展示公司选择框*/
methodC() {
this.methodA().then((res) => {
console.log(res)
if (res === "ok") {
this.methodB();
}
})
},
代码如上,当调用methodC时,会先调用methodA,当then()里接收到methodA调用完成的标志"ok"时才会执行methodB