Javascript 如何重构瀑布

这里的代码使用动作加载数据，可能是串行的，但是如果添加另一个API加载，则很难编辑此代码，语法也不清楚

this.props.LoadNutMatrix（{perPage:'all'}）。然后（（）=>{
this.props.LoadComponents（）。然后（（）=>{
this.props.getBadge（）。然后（（）=>{
loadNutInfoItems（{perPage:'all'}）。然后（（）=>{
this.props.getItemSize（）。然后（（）=>{
this.props.getSingleMenuCategory（this.props.category\u uid）。然后（（）=>{
this.props.loadAllStores（（{per_page:'all'}））。然后（（）=>{
如果（this.props.selectedMenuItem）{
初始化（“addNewMenuItem”{
…this.props.selectedMenuItem
})
}
})
})
})
})
})
})
})

返回承诺，将其链接到外部承诺

this.props.loadNutMatrixes({perPage:'all'}).then(()=>{
  return this.props.loadIngredients()
})
.then(()=>{
  return this.props.getBadge()
})
.then(()=>{
  return this.props.loadNutInfoItems({perPage:'all'})
})
.then(()=>{
  return this.props.getItemSize()
})
.then(()=>{
  return this.props.getSingleMenuCategory(this.props.category_uid)
});

...

---

通过链接承诺而不是嵌套，可以将其转换为垂直结构：

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这样的东西。但都是以串联方式

没有本地方法来链接承诺，但是您可以构建一个适合您的用例的助手方法来实现这一点。下面是一个通用示例：

// `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()
  );
}

---

如果承诺不相互依赖，我会使用

Promise.all

：

const {props} = this;
Promise.all([
    props.loadNutMatrixes({perPage: 'all'}),
    props.loadIngredients(),
    props.getBadge(),
    props.loadNutInfoItems({perPage: 'all'}),
    props.getItemSize(),
    props.getSingleMenuCategory(props.category_uid),
    props.loadAllStores(({per_page: 'all'})),
]).then(() => {
    if (props.selectedMenuItem) initialize("addNewMenuItem", {...props.selectedMenuItem});
});

---

它们彼此不依赖，但必须是串联的，在

Promise中。它们都是并行调用的！它们必须是系列的，所以它们不能承诺。除了垂直结构之外，其他都很酷，但它就像缩进重构一样，我想要语法重构！你所说的语法重构是什么意思？使用像promise.all之类的东西，但要以串联方式！为什么
。然后（（）=>这个.props.loadComponents（））
而不是简单的
。然后（这个.props.loadComponents）
？@nem035谢谢，看起来很棒