您可以通过链接承诺而不是嵌套将其转换为垂直结构:
this.props.loadNutMatrixes({perPage:'all'})
.then(() => this.props.loadIngredients())
.then(() => this.props.getBadge())
.then(() => this.props.loadNutInfoItems({perPage:'all'}))
.then(() => this.props.getItemSize())
.then(() => this.props.getSingleMenuCategory(this.props.category_uid))
.then(() => this.props.loadAllStores(({per_page:'all'})))
.then(() => {
if (this.props.selectedMenuItem) {
initialize("addNewMenuItem", {
...this.props.selectedMenuItem
})
}
});
一个可能的改进可能是将所有接收参数的创建承诺的函数包装到没有参数的函数中,并将它们传递为props
:
loadAllNutMatrixes() {
return this.loadNutMatrixes({ perPage: 'all' });
}
loadAllNutInfoItems() {
return this.loadNutInfoItems({ perPage: 'all' });
}
getSingleMenuCategoryFromId() {
return this.getSingleMenuCategory(this.category_uid);
}
loadEveryStory() {
return this.loadAllStores({ perPage: 'all' });
}
然后您可以将最后一步重构为自己的方法:
onChainFinished() {
if (this.props.selectedMenuItem) {
initialize("addNewMenuItem", {
...this.props.selectedMenuItem
})
}
}
并将两者与一些解构结合起来以实现更清洁的链:
const { props } = this;
props.loadAllNutMatrixes()
.then(props.loadIngredients)
.then(props.getBadge)
.then(props.loadAllNutInfoItems)
.then(props.getItemSize)
.then(props.getSingleMenuCategoryFromId)
.then(props.loadEveryStore)
.then(this.onChainFinished);
根据您的评论进行编辑
使用 promise.all 之类的东西,但以串联方式!
没有本地方法来链接 Promises,但您可以构建一个适合您的用例的辅助方法来执行此操作。这是一个通用示例:
// `cp` is a function that creates a promise and
// `args` is an array of arguments to pass into `cp`
chainPromises([
{ cp: this.props.loadNutMatrixes, args: [{perPage:'all'}] },
{ cp: this.props.loadIngredients },
{ cp: this.props.getBadge },
{ cp: this.props.loadNutInfoItems, args: [{perPage:'all'}] },
{ cp: this.props.getItemSize },
{ cp: this.props.getSingleMenuCategory, args: [this.props.category_uid] },
{ cp: this.props.loadAllStores, args: [{per_page:'all'}] }
]).then(() => {
if (this.props.selectedMenuItem) {
initialize("addNewMenuItem", {
...this.props.selectedMenuItem
})
}
});
function chainPromises(promises) {
return promises.reduce(
(chain, { cp, args = [] }) => {
// append the promise creating function to the chain
return chain.then(() => cp(...args));
}, Promise.resolve() // start the promise chain from a resolved promise
);
}
如果您使用与上述相同的方法来重构带有参数的方法,它也会清理此代码:
const { props } = this;
chainPropsPromises([
props.loadAllNutMatrixes,
props.loadIngredients,
props.getBadge,
props.loadAllNutInfoItems,
props.getItemSize,
props.getSingleMenuCategoryFromId,
props.loadEveryStory
])
.then(this.onChainFinished);
function chainPropsPromises(promises) {
return promises.reduce(
(chain, propsFunc) => (
chain.then(() => propsFunc());
), Promise.resolve()
);
}