RxJs эквивалент цепочки обещаний

Question

При объединении вызовов API с обещаниями я делаю это:

this.http.get('/api/hello').toPromise().then(res => {
  return this.http.get('/api/there/' + res.id).toPromise()
}).then(res => {
  console.log('res from 2nd call', res)
}).catch(err => {
  console.log('err', err)
})

Как вы объединяете подобные вызовы API с помощью Observables, когда для второго ответа требуются данные из первого ответа, прежде чем его можно будет сделать?

TIA

Answer 1

Вы должны использовать flatMap Пожалуйста, посетите этот URL https://stackblitz.com/edit/angular-6-rxjx-stuff. Я создал этот проект для тестирования RxJS.

Вы можете увидеть следующую функцию.

  test__flatMap() {
    const post$ = this.getPosts();
    const users$ = this.getUsers();
    const users2$ = this.getUsers();

    post$.pipe(
      flatMap(data => {
        console.log('data 1 >>> ', data);
        return users$;
      }),
      flatMap(data => {
        console.log('data 2 >>> ', data);
        return post$;
      }),
    ).subscribe(data => { console.log(`In the end >>> `, data); });
  }

Answer 2

Используйте switchMap, чтобы выполнить еще один http.get после первого нажатия данных.switchMap обладает тем преимуществом, что отменяет все ожидающие внутренние запросы, когда родитель отправляет новые данные.

const request$ = this.http.get('pathto/api').pipe(
  switchMap((res) => {
    return this.http.get(`another/api/${res.id}`)
  })
);

request$.subscribe(innerRequestData => {
  // do whatever you want
});

Не забудьте подписаться, так как в противном случае это холодно наблюдаемое.

Answer 3

mergeMap является опцией:

this.http.get(/api/hello')
    .pipe(mergeMap((s) => {
        return s;
    }),
    mergeMap((res) =>{
      const url ='/api/there/' + res.id;
      return this.http.get(url).pipe(map((res) =>   {
            return res;
        }));
    }))
    .subscribe(res => {
        console.log(res);//final response
    }, 
    undefined,
    () => console.log('complete'));

Демо здесь: https://stackblitz.com/edit/angular-xwsltm