Vuex - 來自不同模塊的數據以隨機順序使用然後當（）

Question

在我的vuex模塊我加載數據3次一步一步用3個不同的API請求一個使用then()返回：

actions: { 
    loadRoamingHistory: function loadRoamingHistory(context, roamingFilter): Promise<Array<RoamingHistoryEvent>> { 
     return new Promise((resolve) => { 

     store.dispatch('network/loadNetworks').then(() => { 
      store.dispatch('country/loadCountries').then(() => { 

      providerApi.loadRoamingHistory(roamingFilter).then(data => { 

       // read already loaded networks and countries from store 
       let networks = context.rootState.network.networks; 
       let countries = context.rootState.country.countries; 

       // .. some data processing using informations from 
       // networks and countries request, that are not allways available at this point.. 

       console.log('data processing'); 

       commitSetRoamingHistoryEvents(context, data.roamingHistoryEvent); 
       resolve(); 

      }).catch(err => console.log(err)); 
      }); 
     }); 
     }); 
    } 
    } 

我還添加了的console.log（）命令到網絡和國家vuex制定者爲了看到什麼首先執行：

mutations: { 
    setNetworks: function setNetworks(state: NetworkState, networks: Array<Network>) { 
     console.log('networks loaded'); 
     state.networks = networks; 
    }, 

我預計3個請求而被執行一個接一個，但日誌消息顯示有時它會以不同的順序執行，例如日誌消息ES是這樣的：

networks loaded 
countries loaded 
networks loaded 
data processing 
countries loaded 

注意data processing應該是最後的日誌，否則我無法正確地處理數據。爲什麼它是以隨機順序執行的，爲了修復它可以做些什麼？

Answer 1

首先，我需要糾正自己，調度是一種行爲，它是異步的，所以你對他們使用承諾是正確的。 （我習慣了映射動作，所以我沒有看到它們太多），無論如何，承諾的重點是緩解「回撥地獄」。所以如果你的結構嵌套這樣的：

• 行動
  • 行動
    • 行動
      • 行動

你打敗了首先使用承諾的觀點。

相反，關鍵是把它們連在一個可讀的方式，像這樣

• 行動
• 行動
• 行動
• 行動

actions: { 
    loadRoamingHistory: function loadRoamingHistory(context, roamingFilter): Promise<Array<RoamingHistoryEvent>> { 
    return store.dispatch('network/loadNetworks') 
     .then(() => { 
     return store.dispatch('country/loadCountries') 
     }) 
     .then(() => { 
     return providerApi.loadRoamingHistory(roamingFilter) 
     }) 
     .then(data => { 
     // read already loaded networks and countries from store 
     let networks = context.rootState.network.networks; 
     let countries = context.rootState.country.countries; 

     // .. some data processing using informations from 
     // networks and countries request, that are not allways available at this point.. 

     console.log('data processing'); 

     return commitSetRoamingHistoryEvents(context, data.roamingHistoryEvent); 
     }) 
     .catch(err => console.log(err)); 
    } 
} 

注意。 .. - 最初的承諾沒有定義。由於派遣是異步的，它已經創建了一個承諾，我們只是添加額外的調用。 - 一個承諾內返回一個承諾時，下then()將處理它，無論是withing它 這個功能還是外部 - 你釣到的魚在年底將沿着承諾的鏈