如何在 angular 中嵌套 http 調用

Question

嗨，我需要在 Angular9 中嵌套 3 個調用。 在哪里：

1. 所有調用都是相互依賴的
2. 所有調用都會出錯

a.我怎樣才能以更好的方式編寫代碼？

b.我可以使用 RXJS 嗎？

c.如何與 RXJS 中的錯誤塊一起嵌套？

例子：

this.http.get('/api/people/1').subscribe(character => {
      this.http.get('/api/people/character ').subscribe(homeworld => {
            this.http.get('/api/people/character/homeworld  ').subscribe(finalResponse=> {
                 console.log(finalResponse);
            },
             error =>{
                  console.log(error);
            });
      },
      error =>{
           console.log(error);
      });
},
error =>{
   console.log(error);
});

Answer 1

您將需要一個higher-order mapping operator才能進行一次訂閱，例如switchMap 。

const getPeople = id => this.http.get(`/api/people/${id}`);
const getCharacter = character => this.http.get(`/api/people/${character}`);
const getCharacterAgain = character => this.http.get(`/api/people/character/${character}`);

getPeople(1).pipe(
  switchMap(getCharacter),
  switchMap(getCharacterAgain),
).subscribe(...);