问题场景:

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("接口调用完成...")
	}
}

仅为个人理解,欢迎指正,不断进步。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐