несколько http.post в Angular

Question

Я пытаюсь отправить запрос http.post для каждого элемента массива, мой метод работает хорошо, но когда я подписываюсь, он делает это для каждого запроса, если кто-то может помочь мне оптимизировать это, я сделаю это был бы очень признателен, здесь я оставляю фрагменты своего кода.

component.ts

saveExclusion() {
this.indForm.value.Centers.forEach(element => {
  for (const days of this.exclusionDays) {
    delete days.horadesde;
    delete days.horahasta;
    delete days.id;
    for (const key in days) {
      if (days[key] === true) {
        days[key] = true;
      }else if (days[key] === false) {
        delete days[key];
      }
    }
  }
  const valueForm = this.indForm.value;
  valueForm.ResourceId = this.idResource;
  valueForm.TimeZoneId = 'America/Santiago';
  valueForm.CenterId = element;
  this.exclusionFunc = false;
  this.apiFca.saveNew(valueForm, this.exclusionDays)
    .pipe(last()).subscribe((res: any) => {
      console.log(res)
      if (res === '200') {
        this.successMessage = true;
        this.exclusionDays = [];
        this.indForm.reset();
        this.ngOnInit();
        setTimeout(() => {
          this.successMessage = false;
        }, 3000);
      }
    }, err => {
      console.log('error', err);
    });
});

}

service.ts

saveNew(exclusionData, daysBlock) {
  let reason = '';
  const dt = new Date();
  const n = dt.getTimezoneOffset();
  const tz = new Date(n * 1000).toISOString().substr(14, 5);
  if (exclusionData.OtherReason) {
    reason = exclusionData.ExclusionReason + ' ' + exclusionData.OtherReason;
  } else {
    reason = exclusionData.ExclusionReason;
  }
  if (exclusionData.ExclusionType !== 'Partial' ) {
    daysBlock = [];
  }
  const data = {Exclusion: new ExclusionClass(
   [],
   reason,
   exclusionData.ExclusionType,
   exclusionData.Repetition,
   exclusionData.CenterId,
   exclusionData.ProfessionalName,
   exclusionData.ResourceId,
   daysBlock,
   exclusionData.TimeZoneId,
   'Exclude',
   exclusionData.Unit,
   exclusionData.ValidFrom + 'T' + exclusionData.ValidTimeFrom + ':00-' + tz,
   exclusionData.ValidTo + 'T' + exclusionData.ValidTimeUntil + ':59.999-' + tz
  )};
  if (exclusionData.CenterId === '') {
    delete data.Exclusion.CenterId;
  }
  return this.http
      .post("url", data)
      .pipe(
        map((res: any) => {
          return res.code;
        })
      );
}

привет, жду ваших комментариев, спасибо.

Answer 1

Я не совсем уверен в своих знаниях rx js, но похоже, что из-за .pipe(last()) вы смотрите только последний запрос? Я бы порекомендовал вам установить успех только в том случае, если все завершено без ошибок, например

this.apiFca.saveNew(valueForm, this.exclusionDelays)
    .subscribe(
        res => {
            console.log(res);
        },
        err => {
            console.log(err);
        },
        () => {
            this.successMessage = true;
            // etc. etc. etc.
        });

или, может быть, вместо использования this.successMessage используйте что-то вроде this.saveState$, которое будет объектом BehaviorSubject, инициализированным с помощью 'idle' (или какое-то его перечисление), которым управляет ваша функция saveExclusion(). Таким образом, начало вашей saveExclusion() функции могло

1. set const saveState$ = this.saveState$
2. утверждать, что saveState$.getValue() === 'in process' или, если нет, делать что-то с этим,
3. saveState$.next('in process');

, и вы можете изменить свою строку подписки на

this.apiFca.saveNew(valueForm, this.exclusionDelays)
.subscribe(
    res => {
        if (res !== '200') {
            saveState$.next('unexpected result')
    }   },
    err => {
        console.log(err);
        saveState$.next('error');
    },
    () => {
        if (saveState$.getValue() === 'in process') {
            saveState$.next('success');
    }   }
);

А затем вы также можете подписаться на saveState$ вашего компонента (хотя за пределами компонента вы 'хотел бы предоставить saveState$.asObservable(), чтобы значения не могли быть введены внешним кодом). Это дает элегантный код, управляемый событиями, при инициализации вашего компонента:

saveState$.pipe(filter(val => val === 'error'))
.subscribe(functionToTellYourUserThereWasAnError);

// if successful, we want other code to know, but immediately change it back to 'idle' even if other code errors
saveState$.pipe(filter(val => val === 'success')
.subscribe(val => saveState$.next('idle'));

// upon success, reset me
saveState$.pipe(filter(val => val === 'success'))
.subscribe(
    val => {
        this.exclusionDays = [];
        // etc. etc.
        // setTimeout not needed because set to 'idle' in a different thread.
    }
)

Кроме того, я думаю, что ваш шаблон может также отражать и изменять пользовательский интерфейс в ответ на изменения в saveState$, поэтому ваша кнопка сохранения может может быть включен / отключен в зависимости от того, находится ли saveState в состоянии ожидания, и т. д. c.