Angular 16中基于RxJS实现HTTP PUT请求串行执行

在Angular中结合RxJS可以轻松实现同一时间仅执行一个HTTP PUT请求，后续请求排队等待前一个完成的需求，核心思路是通过请求队列+顺序执行的方式处理请求，具体实现步骤如下：

实现步骤 #

1. 引入必要的RxJS工具 #

确保组件中引入所需的RxJS操作符与类：

import { Subject, Subscription, EMPTY } from 'rxjs';
import { concatAll, catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

2. 构建请求队列与执行逻辑 #

在组件类中定义一个Subject作为请求队列，并在组件初始化时配置队列的顺序执行规则：

export class YourFormComponent implements OnInit, OnDestroy {
  private requestQueue$ = new Subject<Observable<any>>();
  private queueSubscription!: Subscription;
  state = { surname: '', firstName: '', phoneNumber: '' }; // 你的表单状态对象

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // 订阅队列，concatAll会保证请求按顺序执行，前一个完成后再启动下一个
    this.queueSubscription = this.requestQueue$
      .pipe(concatAll())
      .subscribe({
        next: (response) => {
          // 请求成功后的自定义处理，比如更新状态或给出提示
          console.log('请求完成:', response);
        },
        error: (err) => {
          // 请求失败的处理逻辑
          console.error('请求出错:', err);
        }
      });
  }

3. 修改输入变更处理函数 #

不再直接订阅HTTP请求，而是将请求Observable推入队列等待执行：

changedInput() {
    // 构造请求体，根据实际业务调整内容
    const body = { ...this.state };
    // 创建PUT请求Observable，添加错误捕获避免队列中断
    const putRequest$ = this.http.put('v1/...', body).pipe(
      catchError((err) => {
        console.error('PUT请求失败:', err);
        // 返回EMPTY可让队列继续执行后续请求，若要中断队列可改为throwError(() => err)
        return EMPTY;
      })
    );
    // 将请求推入队列
    this.requestQueue$.next(putRequest$);
  }

4. 组件销毁时清理资源 #

避免内存泄漏，在组件销毁时取消订阅并完成队列：

ngOnDestroy(): void {
    this.queueSubscription.unsubscribe();
    this.requestQueue$.complete();
  }
}

额外提示 #

• 你提供的示例代码中两个<input>的id均为id1，不符合HTML规范（id需全局唯一），建议修改为id="surname"、id="firstName"这类唯一标识。
• 若需要在某个请求失败后停止后续队列执行，可将catchError中的return EMPTY替换为throwError(() => err)。

内容的提问来源于stack exchange，提问作者Steven