vue中watch监听,ajax异步问题解决
1.组装参数调方法getResult(){//组装requestParam1和requestParam2参数let requestParam1 = {}let requestParam2 = {}requestParam1.screen = this.screenData;requestParam1.dimension = [this.dimensionData[0]];...
·
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)
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)