Angular 9-如何将2个http.get合并为一个可观测对象

在Angular中，你可以使用RxJS库中的操作符来合并两个HTTP GET请求。一个常用的方法是使用forkJoin操作符，它会并行地发出多个Observable，并在它们都完成时收集它们的最后一个值。

以下是如何使用forkJoin将两个HTTP GET请求合并为一个Observable的示例：

import { forkJoin } from 'rxjs';
import { HttpClient } from '@angular/common/http';

export class YourService {
  constructor(private http: HttpClient) {}

  getCombinedData() {
    const request1$ = this.http.get('https://api.example.com/data1');
    const request2$ = this.http.get('https://api.example.com/data2');

    return forkJoin([request1$, request2$]);
  }
}

在这个例子中，getCombinedData方法会返回一个新的Observable，这个Observable会在两个HTTP请求都完成时发出一个数组，数组中包含了两个请求的结果。

基础概念

Observable: 在RxJS中，Observable是一个可以发出多个值的对象，这些值可以是同步的也可以是异步的。
forkJoin: 是一个操作符，它接收一个Observable数组，并在所有Observable都完成时发出一个包含它们最后值的数组。

优势

并行处理: forkJoin允许你并行地执行多个异步操作，而不是顺序执行，这样可以节省时间。
简化代码: 通过合并请求，你可以减少回调地狱，使代码更加清晰和易于维护。

应用场景

当你需要从多个API端点获取数据，并且这些数据需要一起使用时。
当你希望减少总的请求时间，通过并行加载资源来实现。

可能遇到的问题及解决方法

如果你遇到请求失败的情况，forkJoin会立即失败并抛出错误。为了解决这个问题，你可以使用catchError操作符来捕获错误，并决定是否重试请求或者返回默认值。

import { catchError, of } from 'rxjs';
import { retry } from 'rxjs/operators';

// ... 在YourService中

getCombinedData() {
  const request1$ = this.http.get('https://api.example.com/data1').pipe(
    retry(2), // 重试2次
    catchError(error => {
      console.error('Request 1 failed', error);
      return of(null); // 返回默认值
    })
  );

  const request2$ = this.http.get('https://api.example.js/data2').pipe(
    retry(2),
    catchError(error => {
      console.error('Request 2 failed', error);
      return of(null);
    })
  );

  return forkJoin([request1$, request2$]);
}

在这个例子中，如果任何一个请求失败，它会被重试最多两次，如果仍然失败，则会捕获错误并返回null作为默认值。