vue中watch监听,ajax异步问题解决

2023年5月8日14:08:38

1.组装参数调方法

getResult(){
	//组装requestParam1和requestParam2参数 
	let requestParam1 = {}
	let requestParam2 = {}
	requestParam1.screen = this.screenData;
	requestParam1.dimension = [this.dimensionData[0]];
	requestParam1.measure = this.measureData;
	requestParam1.formInline = this.formInline || {};
	requestParam1.tableSel = this.tableSel;
	requestParam1.chartType = "scatter";
	
	requestParam2.screen = this.screenData;
	requestParam2.dimension = [this.dimensionData[1]];
	requestParam2.measure = this.measureData;
	requestParam2.formInline = this.formInline || {};
	requestParam2.tableSel = this.tableSel;
	requestParam2.chartType = "scatter";
	
	//调方法
	this.getChartDataLater(requestParam1);
	this.getChartDataLater(requestParam2);

	//得到返回的this.results
	let _options = JSON.parse(JSON.stringify(this.chartOptions));
	let _temp_options = scatterRender(this.dimensionData, this.measureData, _options, this.results);
	if(_temp_options){
		this.chartOptions = _temp_options;
	}
},

getChartDataLater(val) {
	getChartData(val).then(res => {
		this.results.push(res);
	}).catch(err => {
		console.log(err);
	});
}
  • 上面的这种写法可能会出现,getChartDataLater方法还没执行完成,this.results这个数组还没有push两次(可能ajax异步导致),就执行了下面得到_options的代码,这时候参数中this.results还只是个空数组

2.使用watch监听

getResult(){
	//组装requestParam1和requestParam2参数 
	let requestParam1 = {}
	let requestParam2 = {}
	requestParam1.screen = this.screenData;
	requestParam1.dimension = [this.dimensionData[0]];
	requestParam1.measure = this.measureData;
	requestParam1.formInline = this.formInline || {};
	requestParam1.tableSel = this.tableSel;
	requestParam1.chartType = "scatter";
	
	requestParam2.screen = this.screenData;
	requestParam2.dimension = [this.dimensionData[1]];
	requestParam2.measure = this.measureData;
	requestParam2.formInline = this.formInline || {};
	requestParam2.tableSel = this.tableSel;
	requestParam2.chartType = "scatter";
	
	//调方法
	this.getChartDataLater(requestParam1);
	this.getChartDataLater(requestParam2);
}getChartDataLater(val) {
	getChartData(val).then(res => {
		this.results.push(res);
		//定义一个 a_watch 初始值为0,每执行一次getChartData就自增1
		//在watch中监听 a_watch 为2时,说明getChartData已经执行了两次,this.results数组组装完成
		this.a_watch = this.a_watch + 1
	}).catch(err => {
		console.log(err);
	});
}

//watch
watch : {
	a_watch(newval, oldVal) {
		console.log(newval, oldVal)
		//第一次getChartData执行完,newval=1,oldVal=0
		//第二次getChartData执行完,newval=2,oldVal=1
		//newval=2时,this.results已经组装完成
		if(newval == 2){
			console.log(this.results)
			let _options = JSON.parse(JSON.stringify(this.chartOptions));
			let _temp_options = scatterRender(this.dimensionData, this.measureData, _options, this.results);
			if(_temp_options){
				this.chartOptions = _temp_options;
			}
		}
	}
}

3.watch属性监听补充

1.watch监听data内数据的变化
data: {
 a: 100
},
watch: {
 a(newval, oldVal) {
  // 做点什么。。。
  console.log(newval, oldVal)
 }
}
2.watch监听整个对象,deep: true 深度监测
data: {
 return {
  msg: {
   name: 'hahah',
   color: 'red'
  }
 }
}

watch: {
 msg: {
  handler(newValue, oldValue) {
   // 做点什么。。。
   console.log(newValue)
 },
 deep: true
}
3.watch监听对象内的某一具体属性,可以通过computed做中间层来实现
computed: {
 name() {
  return this.msg.name
 }
},
watch:{
 name(newValue, oldValue) {
   // 做点什么。。。
   console.log(newval, oldVal)
 }
}

  • 作者:xy405580364
  • 原文链接:https://blog.csdn.net/xy405580364/article/details/103159055
    更新时间:2023年5月8日14:08:38 ,共 2818 字。