Angular 2/4中如何在已有请求运行时阻止新请求？

针对你提到的“请求加载中防止重复点击/回车触发重复请求”的需求，我整理了几个从局部到全局的解决方案，尤其是结合你正在用的Angular HTTP拦截器来实现全局控制的方案：

一、前端UI层面的快速处理（最直观） #

这是用户能立刻感知到的反馈，优先做这个：

• 点击提交按钮后，立刻把按钮设为disabled状态，同时显示加载动画（比如添加loading类）
• 等到请求完成（成功/失败）后，再恢复按钮的可用状态
• 示例代码（Angular组件内）：

  isSubmitting = false;
  
  onSubmit() {
    if (this.isSubmitting) return;
    this.isSubmitting = true;
    
    this.apiService.submitData(formData).subscribe({
      next: (res) => { /* 处理成功逻辑 */ },
      error: (err) => { /* 处理错误逻辑 */ },
      complete: () => { this.isSubmitting = false; }
    });
  }
  

  这个方法能直接阻止用户重复点击，缺点是只能控制单个组件的按钮，没法全局拦截回车或者其他触发方式的请求。

二、HTTP拦截器层面的全局控制（推荐） #

既然你已经在用AuthInterceptor，可以扩展它的功能，实现全局的请求防抖/节流，或者阻止pending状态的重复请求，同时满足你“5秒内阻止新请求”的要求：

实现思路 #

1. 用两个Map分别记录每个请求的pending状态、最后一次请求的时间
2. 在拦截器的intercept方法中，先判断当前请求是否需要被拦截：
   • 如果是同一个接口的请求正在运行（pending），直接取消新请求
   • 或者距离上次请求不足5秒，直接取消新请求
3. 请求完成后（无论成功失败），更新状态，允许后续请求

完整拦截器示例代码 #

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpInterceptor,
  HttpEvent,
} from '@angular/common/http';
import { Observable, throwError, empty } from 'rxjs';
import { catchError, finalize } from 'rxjs/operators';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  // 记录每个请求的pending状态（用URL+Method作为唯一标识）
  private pendingRequests = new Map<string, boolean>();
  // 记录每个请求的最后发送时间，用于5秒冷却限制
  private lastRequestTimes = new Map<string, number>();
  // 白名单：某些接口不需要限制重复请求（比如验证码、公共查询接口）
  private whitelistUrls = ['/api/public/verify-code'];

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const requestKey = `${request.method}-${request.url}`;

    // 白名单接口直接放行
    if (this.whitelistUrls.some(url => request.url.includes(url))) {
      return next.handle(request);
    }

    // 1. 拦截处于pending状态的重复请求
    if (this.pendingRequests.get(requestKey)) {
      console.log(`拦截重复请求：${requestKey}`);
      return empty(); // 返回空Observable，不发送请求
    }

    // 2. 拦截5秒冷却期内的重复请求
    const lastTime = this.lastRequestTimes.get(requestKey);
    const now = Date.now();
    if (lastTime && (now - lastTime) < 5000) {
      console.log(`5秒冷却内拦截请求：${requestKey}`);
      return empty();
    }

    // 标记请求状态，记录当前时间
    this.pendingRequests.set(requestKey, true);
    this.lastRequestTimes.set(requestKey, now);

    return next.handle(request).pipe(
      catchError(err => {
        // 错误时也要清理pending状态
        this.pendingRequests.delete(requestKey);
        return throwError(() => err);
      }),
      finalize(() => {
        // 请求完成（无论成功失败），取消pending标记
        this.pendingRequests.delete(requestKey);
      })
    );
  }
}

关键细节说明 #

• 请求唯一标识：用method+url作为key，避免GET和POST同一个URL被误判
• 双限制逻辑：既阻止pending中的重复请求，又限制5秒内的重复提交，双重保障
• 白名单机制：避免全局拦截影响不需要限制的接口
• finalize操作符：确保无论请求成功还是失败，都能清理pending状态，不会导致后续请求被永久拦截

三、额外补充：针对回车触发的重复请求 #

如果用户是通过回车触发提交，除了上面的方案，还可以在表单的ngSubmit事件里配合状态判断：

<form (ngSubmit)="onSubmit()" [disabled]="isSubmitting">
  <!-- 表单内容 -->
  <button type="submit" [disabled]="isSubmitting">提交</button>
</form>

通过表单的disabled属性，直接阻止回车触发的提交事件，和UI层面的控制配合更稳妥。

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