Javascript 从 Promise (axios) 获取数据

Question

我正在制作一个 Vue.js 网络应用程序，但遇到了一些 javascript 问题。我将描述整个 Vue.js 设置以防万一，但我认为它并不真正相关。我知道还有其他关于这个问题的帖子，但是经过一天半的尝试，我找不到任何可以帮助我解决问题的帖子。

问题：

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

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

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

我知道理论上我可以附加更多 .thens 来做我想要的响应，这就是 javascript 处理同步性的方式，但是我不想对数据做任何事情，除了做出一个输出范围变量等于它。

我的尝试：

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

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

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

你可以尝试使用 async 和 await 来创建异步函数，这样函数就可以看起来像这样，而不需要

.then

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

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

Answer 3

你不需要做任何特别的事情；您可以从.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/