1.异步控制
1.1.async,await等做异步控制
1.2修改函数放置位置达到异步控制效果(我遇到的情况无效,但是确实是一个方法)
2.通过Vue watch监视数据变化,从而达到异步控制的效果
3.事件驱动编程。
三、方法示例
1.异步控制
async mounted() {
await this.b();
this.a();
}
async b() {
const response = await axios.get('your-api-url');
this.someData = response.data;
}
2.watch
this.b();
},
methods: {
async b() {
const response = await axios.get('your-api-url');
this.someData = response.data;
this.$nextTick(() => {
this.$emit('data-loaded');
});
},
a() {
this.$on('data-loaded', () => {
// 在这里可以安全地访问 this.someData,因为它已经被 b 方法异步更新了
});
}
}
四、实例
订单实例中,我们需要设置订单的基础信息(setOrderBasic()),其中包含下单目标的基本信息(queryByPage()),运行中我们通过Vue DevTools等前端开发工具的帮助,完成整个方法执行顺序的控制。
1.赋值时setOrderBasic()由于其内部有值是queryByPage()方法执行完成后才有的,而由于queryByPage()是异步回调,所以要做异步控制
【方法1.2】
但是无用
2.通过直接执行setOrderBasic()方法可以看到
除了需要queryByPage的属性均赋值成功,而没有的属性值则为undefined,可见,虽然无值但仍做了赋值操作(undefined)
3.由此改用watch监视lmInfo
【方法2】
当lmInfo有值(发生改变)时,则触发setOrderBasic方法,至此成功文章来源:https://www.toymoban.com/news/detail-837822.html
文章来源地址https://www.toymoban.com/news/detail-837822.html
到了这里,关于Vue+Axios的方法异步回调顺序问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!