Angular请求限流拦截器报错：Empty error 'no elements in sequence'

问题根源 #

你遇到的"Empty error 'no elements in sequence'"错误，核心原因是原代码里的轮询逻辑存在缺陷：

• 当activeRequests刚好等于MAX_REQUESTS时，takeWhile(() => this.activeRequests > MAX_REQUESTS)不会让interval发出任何值，last()在空流上直接抛出空序列错误。
• else分支里多余的mergeMap逻辑完全没必要，它会强制每个请求事件等待并发数下降，违背了"同时保持10个请求"的核心需求。
• 没有用队列管理等待的请求，多请求同时到达时容易出现竞争条件。

修复后的拦截器实现 #

下面是改用队列管理的可靠版本，完全满足"最多同时10个请求，请求完成自动补队列"的需求：

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

export const MAX_REQUESTS = 10;

@Injectable()
export class SmartCountInterceptorService implements HttpInterceptor {
  private activeRequests = 0;
  private requestQueue: Array<() => void> = [];

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 并发数未满，直接处理请求
    if (this.activeRequests < MAX_REQUESTS) {
      return this.processRequest(req, next);
    } 
    // 并发数已满，将请求加入队列等待
    else {
      return new Observable<HttpEvent<any>>(observer => {
        this.requestQueue.push(() => {
          this.processRequest(req, next).subscribe({
            next: event => observer.next(event),
            error: err => observer.error(err),
            complete: () => observer.complete()
          });
        });
      });
    }
  }

  private processRequest(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.activeRequests++;
    const clonedReq = req.clone();

    return next.handle(clonedReq).pipe(
      finalize(() => {
        this.activeRequests--;
        // 请求完成后，检查队列并取出下一个请求执行
        if (this.requestQueue.length > 0) {
          const nextRequest = this.requestQueue.shift();
          nextRequest?.();
        }
      })
    );
  }
}

关键改进点 #

• 队列化管理：用数组维护等待的请求，每个等待请求封装成执行函数，并发数有空位时自动触发，彻底避免轮询的低效和空序列问题。
• 移除冗余逻辑：删掉原代码中不必要的事件延迟逻辑，确保请求处理流程清晰高效。
• 无竞争条件：Angular环境下拦截器运行在NgZone内，队列操作不会出现多线程竞争问题。

原轮询思路的应急修复（不推荐） #

如果坚持想用原有的轮询方式，可修改waitForActiveRequests方法避免空序列错误，但这种方案效率和可靠性远不如队列管理：

private waitForActiveRequests(): Observable<void> {
  if (this.activeRequests < MAX_REQUESTS) {
    return of(null);
  } else {
    return interval(100).pipe(
      // 调整轮询终止条件，确保能捕获并发数下降的时机
      takeWhile(() => this.activeRequests >= MAX_REQUESTS),
      // 跳过所有不满足条件的轮询，取第一个符合要求的时机
      skipWhile(() => this.activeRequests >= MAX_REQUESTS),
      take(1),
      mapTo(null)
    );
  }
}

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