Как лучше справляться с цепями?

Question

Привет в приложении 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))

Answer 1

Я бы начал с использования async / await, чтобы немного сгладить ситуацию, а затем связал карту / фильтр в одну операцию, чтобы избавиться от промежуточного присваивания. Это даст вам что-то вроде:

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)
}

Ответ Камиля Наджи охватывает другие разумные идеи по упрощению карты / фильтров

Answer 2

Некоторые предложения: во-первых, вы можете извлечь свой код в меньшие функции. Быстрый пример для первого «затем».

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 приложения, я предполагаю использовать RX JS.