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它 这个功能还是外部 - 你钓到的鱼在年底将沿着承诺的链