面试题：Angular中并发HTTP请求的错误处理与控制

Question

在Angular应用里，有多个并发的HTTP请求，比如5个请求获取不同模块的数据。如果其中某个请求失败，要求取消所有正在进行的并发请求，并给用户友好的错误提示。请阐述实现思路，并写出核心代码，说明涉及到的`HttpClient`和RxJS特性。

Answer 1

实现思路

1. 使用 RxJS 的 forkJoin 来并发执行多个 HTTP 请求。forkJoin 会等待所有的 Observable 都完成，然后返回一个包含所有结果的数组。
2. 为每个 HTTP 请求的 Observable 添加 catchError 操作符，以便在某个请求失败时捕获错误。
3. 一旦捕获到错误，使用 RxJS 的 Subject 或 BehaviorSubject 来通知其他请求取消。可以将取消逻辑封装在一个 Observable 中，然后使用 takeUntil 操作符来取消正在进行的请求。
4. 给用户显示友好的错误提示。

核心代码

假设我们有5个 HTTP 请求获取不同模块的数据，以下是核心代码示例：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin, Observable, Subject } from 'rxjs';
import { catchError, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private destroy$ = new Subject<void>();

  constructor(private http: HttpClient) {
    const request1$ = this.http.get('/api/module1').pipe(
      takeUntil(this.destroy$),
      catchError(error => {
        this.showError('请求模块1失败', error);
        this.destroy$.next();
        throw error;
      })
    );
    const request2$ = this.http.get('/api/module2').pipe(
      takeUntil(this.destroy$),
      catchError(error => {
        this.showError('请求模块2失败', error);
        this.destroy$.next();
        throw error;
      })
    );
    const request3$ = this.http.get('/api/module3').pipe(
      takeUntil(this.destroy$),
      catchError(error => {
        this.showError('请求模块3失败', error);
        this.destroy$.next();
        throw error;
      })
    );
    const request4$ = this.http.get('/api/module4').pipe(
      takeUntil(this.destroy$),
      catchError(error => {
        this.showError('请求模块4失败', error);
        this.destroy$.next();
        throw error;
      })
    );
    const request5$ = this.http.get('/api/module5').pipe(
      takeUntil(this.destroy$),
      catchError(error => {
        this.showError('请求模块5失败', error);
        this.destroy$.next();
        throw error;
      })
    );

    forkJoin([request1$, request2$, request3$, request4$, request5$]).subscribe(results => {
      // 所有请求成功，处理结果
      console.log('所有请求成功', results);
    });
  }

  showError(message: string, error: any) {
    console.error(message, error);
    // 这里可以使用Angular的弹窗服务等给用户友好提示
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

涉及到的 HttpClient 和 RxJS 特性

1. HttpClient：用于发起 HTTP 请求，是Angular中处理 HTTP 操作的核心模块。它返回一个 Observable，使得我们可以方便地结合 RxJS 操作符进行处理。
2. RxJS 的 forkJoin：用于并发执行多个 Observable，并等待所有 Observable 完成后返回结果。当其中任何一个 Observable 出错时，forkJoin 会立即终止，并将错误传递给订阅者。
3. catchError 操作符：用于捕获 Observable 中的错误，并可以选择处理错误或重新抛出错误。在这里，我们捕获请求失败的错误，显示友好提示并取消其他请求。
4. Subject 和 takeUntil 操作符：Subject 用于创建一个可观察对象，我们可以手动触发它的 next 方法来发送值。takeUntil 操作符用于监听另一个 Observable，当该 Observable 发出值时，会取消当前 Observable 的订阅，从而实现取消正在进行的请求。