Question

我正在制作Vue.js网络应用，但遇到了一些JavaScript问题。为了以防万一，我将描述整个Vue.js设置，但是我认为它并没有真正意义。我知道还有其他关于此问题的帖子，但是经过一天半的努力弄清楚，我找不到任何能帮助我解决这个问题的帖子。

问题：

我正在尝试从前端的后端访问数据。我正在使用如下所示的axios请求：

axios.request({...}).then(function (response) { ... }.catch(function (error) { ... });

response中的.then获得了我想要的正确数据（一个数组），但是由于.then是一个承诺，所以我不知道如何获取该数据。我需要弄清楚它的原因是因为这全部在组件内部方法的内部，并且我想将响应等同于我的数据变量中的值。所以基本上我想做：
this.myvar = this.myvar.concat(response)
但是在.then内部，我不在组件范围内，因此我想从.then中获取响应，以便可以将数据更改为它。

我了解从理论上讲，我可以添加更多.then来完成响应，这就是javascript处理同步性的方式，但是除了make之外，我与数据无关等于它的范围外变量。

我的尝试

我发现的一件事是，我可以在axios请求之前声明一个单独的变量，由于某种原因，该变量将在.then中对我可用。因此，我尝试初始化一个新变量，使其成为超出范围（this.myvar）的组件数据变量的指针，然后将.then中的该变量更改为响应，但随后引发其他问题，因为在变量.then内部更改为同步之前，我最终返回了函数（包含axios请求和所有内容）。

编辑： 我的代码 这是组件内部的一种计算方法。它必须返回在Vuejs模板中调用的this.myvar。

MyFunc: function () {  
    var a = this.myvar;                                                                                            
    axios.request({                                                                                                
        method: 'post',                                                                                              
        url: 'http://myURL:MyPort/query',                                           
        data: {                                                                                                      
           'mydata': dataToSend                                                                                                         
        },                                                                                                           
    }).then(function (response) {                                                                                  
        a = a.concat(Object.values(response.data.results));                                                        
    }).catch(function (error) {                                                                                           
        console.log(error);                                                                                          
    });
    return this.myvar
}

这不是我第一次在JavaScript中遇到关于Promise的问题，我尝试阅读它们，但是我完全不了解如何处理它们。任何帮助将不胜感激。

Answer 1

如果这是在Vue组件中，那么您需要了解一些概念：

a）计算属性不能异步。它需要立即从已经可用的值中返回一个值

b）您可以使用axios请求异步值，并且在获得响应时，只需将值分配给组件数据中的属性即可

data: () => {
    return {
        dataFromServer: undefined,
    };
},
methods: {
    getDataFromServer() {
        axios.get(url)
            .then(response => response.data)
            .then(data => {
                this.dataFromServer = data;
            })
    },
},

c）最后，如果您需要来自服务器的值的计算属性，则可以这样定义它：

computed: {
    derivedValue() {
        return this.dataFromServer? this.dataFromServer * 2 : undefined;
    },
}

最初，derivedValue是不确定的，因为它取决于尚不可用的值。但是，一旦从服务器返回值并将其分配给this.dataFromServer，Vue.js便会发挥神奇的作用，并会自动重新计算derivedValue，并更新显示它的每个位置。

重要的是要意识到，可以在模板中使用dataFromServer或derivedValue。而且，请考虑到在短时间内，这些值是不确定的，直到服务器响应返回给您为止。

Answer 2

您不需要做任何特别的事情；您可以按如下所示从.then块返回数据：

axios.request({...})
.then(function (response) { 
  return response.data;  // Or assign it to a variable or state in your app
}
.catch(function (error) { 
  ...
});

jsfiddle示例：https://jsfiddle.net/rj4pgwek/

Answer 3

您可以尝试使用async并等待创建异步功能，以便该功能看起来像这样，而无需

.then

const myAsyncFunc = async () => {
    const axiosURI = 'Some_URI_To_call'
    const res = await axios.post(axiosURI, {
      params:{}
    });
}

结果将在 res 变量中，因此您可以使用它来将克隆到 res 到另一个变量中，以便在其他地方重用

Javascript从Promise（AXios）获取数据

3 个答案: