Angular中多个HTTP请求的最佳方式

Question

我正在尝试一个一个地发送 2 个 HTTP 请求；如果第一个成功，则发送第二个，如果没有，则显示与第一个请求有关的相应错误消息。

我打算使用类似的东西，但不确定它是否是这种情况下的最佳选择：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  loadedCharacter: {};
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('/api/people/1').subscribe(character => {
      this.http.get(character.homeworld).subscribe(homeworld => {
        character.homeworld = homeworld;
        this.loadedCharacter = character;
      });
    });
  }
}

我有不同的要求，例如PUT 和 CREATE 也使用这种方法。我知道还有其他方法，例如forkjoin，mergemap，但如果这个解决了我的问题似乎更具可读性。有什么想法吗？

Answer 1

2 嵌套订阅绝不是可行的方法。我推荐这种方法：

this.http.get('/api/people/1').pipe(
  switchMap(character => this.http.get(character.homeworld).pipe(
    map(homeworld => ({ ...character, homeworld })),
  )),
).subscribe(character => this.loadedCharacter = character);

---

编辑：对于你的大学

this.http.get('/api/people/1').pipe(
  switchMap(character => this.http.get(character.university).pipe(
    map(university => ({ ...character, university})),
  )),
).subscribe(character => this.loadedCharacter = character);

甚至连锁大学和家乡的要求

this.http.get('/api/people/1').pipe(
  switchMap(character => this.http.get(character.homeworld).pipe(
    map(homeworld => ({ ...character, homeworld })),
    // catchError(err => of({ ...character, homeworld: dummyHomeworld })),
  )),
  switchMap(character => this.http.get(character.university).pipe(
    map(university => ({ ...character, university})),
  )),
).subscribe(character => this.loadedCharacter = character);

Answer 2

您可以通过检查状态码来检查第一个请求是否成功：

  ngOnInit() {
    this.http.get('/api/people/1').subscribe((character: HttpResponse<any>) => {
      // here you should look for the correct status code to check, in this example it's 200
      if (character.status === 200) {
        this.http.get(character.homeworld).subscribe(homeworld => {
          character.homeworld = homeworld;
          this.loadedCharacter = character;
        });
      } else {
        // character is gonna contain the error
        console.log(character)
      }
    });
  }

Answer 3

首先，您的代码可以运行，这很好 - 您可以保持原样，一切都会好起来的。

另一方面，有多种改进方法可以帮助您和您的同事将来：

1. 尝试将与 http 相关的逻辑移动到服务中，而不是在组件中调用 http - 这将帮助您将代码拆分为与视图相关的逻辑和与业务/获取/转换相关的逻辑。
2. 尽量避免嵌套subscribes - 不仅您忽略了Observables 的强大功能，而且还会将代码绑定到某个流程，而无法在应用程序的某处重用这些行。返回 Observable 可能会帮助您“共享”请求的结果或以某种方式对其进行转换。
3. flatMap/mergeMap、concatMap 和 switchMap 以不同的方式工作，让您能够按照自己的方式控制行为。尽管对于http.get()，它们的工作方式几乎相似，但最好尽快开始学习这些组合运算符。
4. 考虑一下在这种情况下您将如何处理错误 - 如果您的第一次调用将导致错误，会发生什么情况？ Observables 有一个强大的机制来处理它们，而.subscribe 只允许您以一种方式处理错误。

一个使用switchMap的例子：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  loadedCharacter: {};
  constructor(private http: HttpClient) {}

  ngOnInit() {
    const character$ = this.http.get('/api/people/1').pipe(
      tap(character => this.characterWithoutHomeworld = character), // setting some "in-between" variable
      switchMap(character => {
        return this.http.get(character.homeworld).pipe(
            map(homeworld => {
                    return {
                        ...character,
                        homeworld: homeworld
                    }
                }
            )
        )
      }),
      catchError(errorForFirstOrSecondCall => {
        console.error('An error occurred: ', errorForFirstOrSecondCall);
        // if you want to handle this error and return some empty data use:
        // return of({});
        
        // otherwise: 
        throw new Error('Error: ' + errorForFirstOrSecondCall.message);
      })
);

    // you can either store this variable as `this.character$` or immediately subscribe to it like:
    character$.subscribe(loadedCharacter => {
        this.loadedCharacter = loadedCharacter;
    }, errorForFirstOrSecondCall => {
       console.error('An error occurred: ', errorForFirstOrSecondCall);
    })
  }
}

Answer 4

您可以尝试使用switchmap 和forkJoin 的解决方案，以便更轻松地进行链接和错误处理。这将有助于保持代码干净，以防链不断增长为深巢。

    this.http
      .get("/api/people/1'")
      .pipe(
        catchError((err) => {
          // handle error
        }),
        switchMap((character) => {
          return forkJoin({
            character: of(character),
            homeworld: this.http.get(character.homeworld)
          });
        })
      )
      .subscribe(({ character, homeworld }) => {
        character.homeworld = homeworld;
        this.loadedCharacter = character;
      });

编辑：场景 2

this.http
      .get("/api/people/1")
      .pipe(
        catchError((err) => {
          console.log("e1", err);
        }),
        switchMap((character) => {
          return forkJoin({
            character: of(character),
            homeworld: this.http.get(character.homeworld).pipe(
              catchError((err) => {
                console.log("e2", err);
              })
            )
          });
        })
      )
      .subscribe(({ character, homeworld }) => {
        character.homeworld = homeworld;
        this.loadedCharacter = character;
      });

您可以链接一个捕获错误或添加一个单独的函数来处理错误，而无需调用下一个 API 调用。但我建议将后端逻辑抽象为角度服务并使用此方法。这将有助于保持易于阅读的结构。