将异步执行的axios请求设置为同步执行
vue框架前端项目开发中,用axios请求后端接口,默认为异步执行,即在请求未执行完毕时会异步执行请求函数后面的语句,从而导致数据改变发生冲突。
·
问题场景:
vue框架前端项目开发中,用axios请求后端接口,默认为异步执行,即在请求未执行完毕时会异步执行请求函数后面的语句,从而导致数据改变发生冲突。
解决思路:
在用ajax方法请求后端接口时,可以通过修改async
的值来改变异步/同步。结合这个思路以及网络资料,虽然在axios方法中没有类似属性值,但可以通过async
+await
组合使用将异步执行该为同步执行。
解决方案:
具体实现代码如下
//api.js
import request from '@/utils/request'
export default {
//封装请求后端接口方法
get() {
return request({
url: '...',
method: 'post'
})
}
}
//index.vue
methods: {
async getInfo() {//请求接口并对返回数据做处理
await api.get().then( response => {//api.get()
})
},
async f(){
console.log("调用接口...")
await this.getInfo()
console.log("接口调用完成...")
}
}
仅为个人理解,欢迎指正,不断进步。
更多推荐
已为社区贡献2条内容
所有评论(0)