如何处理更好的链接方式？

Posted 2021-04-10

你在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))

答案

某些提示：首先，您可以将代码提取到较小的函数中。第一个“ 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") 

您还可以将地图，过滤器和forEach方法之外的代码移出常量，并在其他地方使用此代码。

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

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

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

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

另一答案

我会先使用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答复涵盖了简化地图/过滤器的其他明智建议