Vue flushCallbacks报错解决方式----小记

问题描述

  //根据过渡期合同号获得合同基本信息+政策
  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

2.2展示一下结果: