Angular中TypeScript异步HTTP调用如何识别旧参数请求结果并忽略

你可以通过两种常用方案实现请求过期判断，以下是具体实现：

方案1：请求版本标记法（改动最小，无需调整现有异步逻辑） #

核心思路是给每一轮搜索分配唯一的版本标识，请求返回后对比版本是否为最新，非最新直接丢弃结果。

实现步骤： #

1. 组件内新增版本号变量，每次触发新搜索时版本号自增：

// 组件内定义变量
private requestVersion = 0;
public resultList: any[] = []; // 你的结果存储变量

2. 用户触发新搜索的逻辑中更新版本号：

// 新搜索触发方法
public handleSearch(newQuery: any) {
  // 版本号+1，所有之前发起的请求版本均小于当前值，视为过期
  this.requestVersion++;
  // 清空现有结果
  this.resultList = [];
  // 重新加载初始3页
  this.loadThree();
}

3. 修改getPages方法，请求发起时记录当前版本，响应返回后校验版本：

public async getPages() {
  // 记录本次请求发起时的版本号
  const currentReqVersion = this.requestVersion;
  // 原有参数处理逻辑
  // ...
  const postResponse = await this.<servicename>.getListings();
  // 版本不一致直接丢弃结果，不做后续处理
  if (currentReqVersion !== this.requestVersion) {
    return;
  }
  // 版本校验通过再追加结果
  this.resultList.push(...postResponse.data);
  // 原有后续逻辑
  // ...
}

适用场景： #

不想改动现有服务层代码、请求量不大的场景，实现简单逻辑直观。

方案2：基于RxJS自动取消旧请求（性能最优） #

Angular的Http客户端本身基于RxJS实现，使用switchMap操作符可以自动取消未完成的旧请求，从根源上避免过期响应的处理。

实现步骤： #

1. 先修改服务层的getListings方法，移除toPromise直接返回Observable：

public getListings() {
  // generate path, body, headers
  return this.http.post<any>(path, body, headers)
  .pipe(
    catchError(this.handleError)
  );
}

2. 组件内使用Subject管理加载触发，配合switchMap自动取消旧请求：

import { Subject, switchMap, takeUntil } from 'rxjs';

// 组件内新增变量
private loadPage$ = new Subject<void>();
private destroy$ = new Subject<void>();
public resultList: any[] = [];
public loading = false;

ngOnInit(): void {
  // 监听页面加载请求，switchMap会自动取消上一次未完成的请求
  this.loadPage$.pipe(
    switchMap(() => this.<servicename>.getListings()),
    takeUntil(this.destroy$)
  ).subscribe({
    next: (res) => {
      // 此处仅会收到最新请求的响应，旧请求已被自动取消
      this.resultList.push(...res.data);
      this.loading = false;
    },
    error: () => {
      this.loading = false;
    }
  })

  this.loadThree();

  // 滚动检测逻辑可以保留，也可替换为scroll事件监听
  setInterval(() => {
    if ((this.container.scrollHeight - (this.scrollWindow.scrollTop + this.scrollWindow.clientHeight) < 1000) {
      if (!this.loading) {
        this.loading = true;
        this.loadPage$.next();
      }
    }
  }, 1000)
}

public loadThree() {
  this.loading = true;
  for(let i = 0; i < 3; i ++) {
    this.loadPage$.next();
  }
}

// 新搜索触发逻辑
public handleSearch() {
  this.resultList = [];
  this.loadThree();
}

// 组件销毁时清理订阅，避免内存泄漏
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

适用场景： #

请求量较大、对性能要求高的场景，直接取消过期请求节省带宽和处理资源。

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