Vuex - 来自不同模块的数据以随机顺序使用然后当()
问题描述:
在我的vuex模块我加载数据3次一步一步用3个不同的API请求一个使用then()
返回:Vuex - 来自不同模块的数据以随机顺序使用然后当()
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
应该是最后的日志,否则我无法正确地处理数据。为什么它是以随机顺序执行的,为了修复它可以做些什么?
答
首先,我需要纠正自己,调度是一种行为,它是异步的,所以你对他们使用承诺是正确的。 (我习惯了映射动作,所以我没有看到它们太多),无论如何,承诺的重点是缓解“回拨地狱”。所以如果你的结构嵌套这样的:
- 行动
- 行动
- 行动
- 行动
- 行动
- 行动
你打败了首先使用承诺的观点。
相反,关键是把它们连在一个可读的方式,像这样
- 行动
- 行动
- 行动
- 行动
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它 这个功能还是外部 - 你钓到的鱼在年底将沿着承诺的链
+0
Thx,它解决了问题。 – Incredible
行动是异步的任何地方登录错误,突变不是'store.dispatch('network/loadNetworks')。那么(()...'不应该被需要。此外,promises并不意味着嵌套,而是后续。 – Daniel
它怎么可以改为后续? – Incredible