vue axios请求数据问题？

Question

写了一个函数 返回数据，

Vue.prototype.$http = axios

Vue.prototype.getData = function(url){
    let _data ='';
    this.$http.get(url).then(res=>{
        _data = res.data;
      });
    return _data;
}

这样获取不到数据,返回的还是空。不知道怎么解决，或有什么办法可以对axios设置同步。

我是想这样直接获取数据

this.list = this.getData(url);

或者data的时候,直接返回数据

data：function(){

return this.getData(url);

}

Answer 1

用 async await 可以达到局部的同步写法

Vue.prototype.getData = function(url){
   return this.$http.get(url).then(res=>res.data);
}
//调用
this.getData('url').then(res=>{
   console.log(res)
})
//async 
async function(){
  var data = await this.getData(url);
  console.log(data);
}

Answer 2

不用同步。。。可以这样
定义

Vue.prototype.getData = function(url){
    return axios.get(url).then(res=>{
        return res.data
    });
}

应用

this.getData(url).then(data => console.log(data)) 

Answer 3

可以参考nuxt.js的asyncData的处理方式。不太了解你是服务器端渲染还是客户端渲染。
服务器端渲染和客户单渲染好像都是对render方法做了一定的修改。插入一部数据的。

Answer 4

谢邀。这是典型的异步场景。因为数据在服务器上，正常的下载需要数秒不等的时间，为了不影响用户的正常使用，所以会进入异步流程，所以你直接取是取不到的。

解决方案楼上说的基本都对。目前通用的解决方案是使用 Promise，我刚好做过一次关于 Promise 的讲堂：Promise 的 N 种用法。推荐你看一下。

Answer 5

async await了解一下 典型异步了