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

# 最佳实践：Angular 中处理多个 HTTP 请求的优雅方式

typescript
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';
@Component({
  selector: 'app-multiple-requests',
  template: `
    
      {{ result | json }}
    
  `,
})
export class MultipleRequestsComponent {
  results: any[];
  constructor(private http: HttpClient) {
    // 发起多个并行请求
    const request1 = this.http.get('api/resource1');
    const request2 = this.http.get('api/resource2');
    const request3 = this.http.get('api/resource3');
    // 使用forkJoin合并请求
    forkJoin([request1, request2, request3]).subscribe(
      (data: any[]) => {
        this.results = data;
      },
      (error) => {
        console.error('Error in forkJoin: ', error);
      }
    );
  }
}

typescript
import { catchError } from 'rxjs/operators';
// ...
forkJoin([request1, request2, request3]).pipe(
  catchError((error) => {
    console.error('Error in forkJoin: ', error);
    // 可以返回一个备用的Observable或抛出一个错误
    return [];
  })
).subscribe(
  (data: any[]) => {
    this.results = data;
  }
);

typescript
import { concatMap } from 'rxjs/operators';
// ...
const sequentialRequests = this.http.get('api/resource1').pipe(
  concatMap((result1) => {
    // 处理第一个结果，然后发起第二个请求
    console.log(result1);
    return this.http.get('api/resource2');
  }),
  concatMap((result2) => {
    // 处理第二个结果，然后发起第三个请求
    console.log(result2);
    return this.http.get('api/resource3');
  })
);
sequentialRequests.subscribe(
  (finalResult) => {
    // 处理最终结果
    console.log(finalResult);
  },
  (error) => {
    console.error('Error in sequentialRequests: ', error);
  }
);