如何在 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(...);