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我不在組件的范圍內，所以我想從.then獲取響應.then以便可以將數據更改為該。

我了解理論上我可以追加更多.then來做我想要的響應，這就是javascript處理同步性的方式，但是除了建立范圍外，我不需要處理數據等於它的變量。

我的嘗試：

有一件事是，我發現我可以宣布愛可信請求之前單獨的變量權，出於某種原因，這個變量將提供給我的里面.then 。 所以，我想初始化一個新的變量是一個指針到組件的數據變量會外的范圍（ this.myvar ），然后改變這個變量的.then到響應，但隨后即reaises其他的問題，因為我最終返回我的功能（包含愛可信請求和一切）之前變量被內部改變.then做了同步，並引起其他問題。

編輯： 我的代碼這是一個組件內部的計算的方法。 它必須返回在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並放入另一個變量中，以便在其他地方重用