Угловая наблюдаемая асинхронная труба?

Question

Предположим, у меня есть Rest API событий списков.

• POST [203]: дает массив событий.
• POST [404]: данные не найдены.

Вот мой код.

export function httpFetchRetry<T>(source: Observable<T>): Observable<T> {
  let errorScanner = (errorCount: number, error: any) => {
    if (errorCount >= 5) throw error;
    else if (error.status === 404) throw error;
    else return errorCount + 1;
  };

  return source.pipe(retryWhen(e => {
    return e.pipe(scan(errorScanner, 0), delay(3000))
  }));
}

export function httpFetchMap<T>(source: Observable<T>): Observable<T[]>{
  return source.pipe(map(({data}: any):any[] => data));
}

---

private listEvents(user_id: string){

 let url: string = `${environment.apiEndpoint}/event`;
 let payload: any = { user_id };

 this.allEvents$ = this.http.post(url, payload)
  .pipe(httpFetchRetry)
  .pipe(httpFetchMap)
}

---

код прекрасно работает с асинхронным каналом .

Но теперь мне нужно добиться отображения одного из этих статусов на UI .

<p> Loading </p>
<p> Loaded </p>
<p> No Data <p>
<p> Error <p>

---

Q1: Если я использую n асинхронных каналов, n API-вызовы инициируются,Как мне избежать этого?

Q2: Как сделать I одним из этих статусов ?

---

В настоящее время я являюсьрешить это как

.toPromise()
      .then(data => {
        this.data= data;
        this.noDataFound = false;
      })
      .catch(err => {
        if(err.status === 404){
          this.noDataFound = true;
        }
        else{
          this.snackBar.open("Something went wrong. Please try again.", null , { duration: 2000 });
        }
      })
      .finally(() => { this.pageLoader = false });

Answer 1

Наблюдаемые отличаются от Обещаний тем, что они ничего не делают до subscribed до.Вы можете связать конвейер преобразований в Observable, но оригинальная функция Observer не будет работать до тех пор, пока не будет подписана оболочка Observable.Они также отличаются от Обещаний тем, что функция Observer будет запускаться для каждой подписки на Observable.

Методы http возвращают холодную, конечную Observable с одной эмиссией до их завершения.Здесь функция Observer - это сам вызов http.Проверьте ваши инструменты разработки, и вы обнаружите, что http-вызов не выполняется до тех пор, пока вы не подпишетесь на Observable.

Труба async фактически subscribe s к Observable под капотом и разворачивает ее выбросы как значенияТаким образом, использование трубы приведет к запуску Observable.Точно так же оператор toPromise также подписывается на источник Observable и преобразует его в Обещание, поэтому он работает как Обещание при немедленном запуске.

Канал async обычно является рекомендуемым способом развертывания.Observable s, но с конечным Observable, например, запросом http, вы можете развернуть значение и удерживать его где-то вне шаблона:

private listEvents(user_id: string){

 let url: string = `${environment.apiEndpoint}/event`;
 let payload: any = { user_id };

 this.http.post(url, payload)
  .pipe(httpFetchRetry, httpFetchMap)
  .subscribe(s => this.allEvents = s);

}

Хороший шаблон проектирования - это удерживать этозначение в службе для доступа нескольких компонентов.