那么如何处理更好的连锁呢？答案

【问题标题】：How to handle better chained thens?那么如何处理更好的连锁呢？
【发布时间】：2020-05-21 18:58:44
【问题描述】：

您好，在 ionic3 应用程序中，我的代码取决于 2 个提供者 getChildren 和 getBottle - 哪些提供者返回承诺。我想让这段代码干净，但是我需要使用 2 个提供程序来处理来自 API 的数据。感谢您的任何建议。

this.dayReportProvider.getChildren(this.groupId, this.dateFromDailyOverview)
      .then((val: any) => {
        this.fetchedChildren = val.mobile_employee_getactive_children_of_day.map(item => item);
        this.fetchedChildren.forEach((item, i) => {
          this.fetchedChildren[i].color = "secondary"
        })
        return this.fetchedChildren;
      })
      .then((fetchedChildren) => {
        console.log('second then fetchedChildren =>', this.fetchedChildren)
        // calling the second Provider
        return this.getBottle();
      })
      .then((preselectedChildren) => {
        console.log('third then after getBottle() preselectedChildren', preselectedChildren);
        this.preselectedChildren = preselectedChildren;
          this.fetchedChildren = this.fetchedChildren.map((el) => {
            if (this.preselectedChildren.includes(Number(el.id))) {
              return {
                ...el,
                color: 'primary'
              }
            }
            return el;
          });
          // Make preselectedChildren available for submit
          this.selectedChildren = this.fetchedChildren.filter((child) => {
            return child.color === "primary";
          }) 

        if (this.navParams.data.childId) {
          this.childId = this.navParams.data.childId;
          this.selectChildBasedOnParams();
        }
        this.appFunctionCtrl.dismissLoader();
      })
      .catch((err) => console.log('Errror with fetching children', err))

【问题讨论】：

标签： angular typescript ionic3

【解决方案1】：

一些建议：首先，您可以将代码提取到较小的函数中。第一个“then”的快速示例。

changeColor = () => {
   this.fetchedChildren = val.mobile_employee_getactive_children_of_day.map(item => item);
   this.fetchedChildren.forEach((item, i) => {
       this.fetchedChildren[i].color = "secondary"
   })
   return this.fetchedChildren;
}

在某些地方，你可以使用 ES6 的高级特性，让代码更短：

this.selectedChildren = this.fetchedChildren.filter((child) => child.color === "primary")

您还可以将 map、filter 和 forEach 方法中的代码移出到常量中，并在其他地方也使用此代码。

this.selectedChildren = this.fetchedChildren.filter(filterByColor()) 

filterByColor = () => child => child.color === "primary"

为颜色创建枚举也是一个好主意。

如果你在 Angular 应用程序中进行如此复杂的操作，我想使用 RXJS。

【讨论】：

【解决方案2】：

我首先使用 async/await 将事情弄平一点，然后将 map/filter 链接到一个操作中以摆脱中间分配。这会给你类似的东西：

try {

    const val = await dayReportProvider.getChildren(groupId, dateFromDailyOverview)

    const fetchedChildren = val.mobile_employee_getactive_children_of_day.map(item => item)
    fetchedChildren.forEach((item, i) => {
        fetchedChildren[i].color = "secondary"
    })

    console.log("second then fetchedChildren =>", fetchedChildren)
    // calling the second Provider
    const preselectedChildren = await getBottle()
    console.log("third then after getBottle() preselectedChildren", preselectedChildren)
    const selectedChildren = fetchedChildren
        .map(el => {
            if (preselectedChildren.includes(Number(el.id))) {
                return {
                    ...el,
                    color: "primary"
                }
            }
            return el
        })
        .filter(child => {
            return child.color === "primary"
        })

    if (navParams.data.childId) {
        childId = navParams.data.childId
        selectChildBasedOnParams()
    }
    appFunctionCtrl.dismissLoader()
} catch (err) {
    console.log("Errror with fetching children", err)
}

Kamil Naja 的回复涵盖了简化地图/过滤器的其他明智想法

【讨论】：