Angular Cli技术问题：如何停止持续请求及取消重复请求？

嘿，针对你提出的两个问题，结合Quote功能场景，我来给你详细梳理解决方案：

一、如何阻止服务器发送持续请求？ #

这里的“持续请求”通常分几种常见场景，咱们逐个来看对应的解决办法：

• 场景1：组件销毁后停止未完成的请求
  这是最常见的情况——比如用户切换路由后，之前组件的请求还在跑，既浪费资源又可能导致不必要的错误。用RxJS的takeUntil操作符配合组件的销毁钩子就能完美解决：

  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Subject } from 'rxjs';
  import { takeUntil } from 'rxjs/operators';
  import { Quote } from "../quote.interface";
  
  @Component({
    selector: 'app-quotes',
    templateUrl: './quotes.component.html',
    styleUrls: ['./quotes.component.css']
  })
  export class QuotesComponent implements OnInit, OnDestroy {
    private destroy$ = new Subject<void>();
    quotes: Quote[] = [];
  
    constructor(private http: HttpClient) {}
  
    ngOnInit(): void {
      this.http.get<Quote[]>('/api/quotes')
        .pipe(takeUntil(this.destroy$))
        .subscribe(quotes => this.quotes = quotes);
    }
  
    ngOnDestroy(): void {
      this.destroy$.next();
      this.destroy$.complete();
    }
  }
  

  当组件被销毁时，destroy$会发出终止信号，takeUntil会立刻停止所有订阅的请求，避免后续的响应处理。

• 场景2：避免用户重复触发请求（比如频繁点击刷新按钮）
  如果是用户多次触发请求（比如疯狂点刷新），可以用switchMap、exhaustMap或者简单的状态锁来控制：

  • 用switchMap：新请求触发时直接取消前一次未完成的请求，只保留最新的
  • 用exhaustMap：前一次请求没完成时，直接忽略新的请求
    举个按钮触发的例子：

  import { Subject } from 'rxjs';
  import { switchMap } from 'rxjs/operators';
  
  // 组件里定义一个触发请求的Subject
  private refreshTrigger$ = new Subject<void>();
  
  ngOnInit(): void {
    this.refreshTrigger$
      .pipe(
        switchMap(() => this.http.get<Quote[]>('/api/quotes'))
      )
      .subscribe(quotes => this.quotes = quotes);
  }
  
  // 按钮点击事件
  onRefresh(): void {
    this.refreshTrigger$.next();
  }
  

  要是想限制请求频率（比如用户快速点击只发最后一次），可以加个debounceTime：

  this.refreshTrigger$
    .pipe(
      debounceTime(300), // 300ms内的重复点击会被忽略
      switchMap(() => this.http.get<Quote[]>('/api/quotes'))
    )
    .subscribe(...);
  

• 场景3：主动取消正在进行的请求
  Angular 15+支持用浏览器原生的AbortController来手动取消请求，灵活性很高：

  private abortController?: AbortController;
  
  fetchQuotes(): void {
    // 先取消之前的请求
    if (this.abortController) {
      this.abortController.abort();
    }
    this.abortController = new AbortController();
    
    this.http.get<Quote[]>('/api/quotes', { signal: this.abortController.signal })
      .subscribe({
        next: quotes => this.quotes = quotes,
        error: err => {
          if (err.name === 'AbortError') {
            console.log('请求已取消，不用担心');
          } else {
            console.error('请求失败:', err);
          }
        }
      });
  }
  
  ngOnDestroy(): void {
    if (this.abortController) {
      this.abortController.abort();
    }
  }
  

二、如何在返回前一次请求结果前终止第二次请求（以Quote功能为例） #

这个需求刚好是switchMap的拿手好戏——它会在新请求触发时自动终止前一次未完成的请求，只处理最新的。我把你提供的代码补全成完整示例：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Quote } from "../quote.interface";
import { QuoteService } from "../quote.service";
import { Subject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-quotes',
  templateUrl: './quotes.component.html',
  styleUrls: ['./quotes.component.css']
})
export class QuotesComponent implements OnInit, OnDestroy {
  quotes: Quote[] = [];
  private destroy$ = new Subject<void>();
  private quoteRequestTrigger$ = new Subject<void>(); // 用来触发请求的信号源

  constructor(private quoteService: QuoteService) {}

  ngOnInit(): void {
    // 监听请求触发信号，用switchMap处理请求
    this.quoteRequestTrigger$
      .pipe(
        switchMap(() => this.quoteService.getQuotes()), // 新请求一来，就取消前一次
        takeUntil(this.destroy$) // 组件销毁时停止所有请求
      )
      .subscribe({
        next: (quotes) => {
          this.quotes = quotes;
          console.log('拿到最新的Quote数据啦');
        },
        error: (err) => {
          // 忽略请求被取消的错误
          if (err.name !== 'AbortError') {
            console.error('获取Quote失败:', err);
          }
        }
      });

    // 初始化时先触发一次请求
    this.quoteRequestTrigger$.next();
  }

  // 比如用户点击刷新按钮时调用这个方法
  onRefreshQuotes(): void {
    this.quoteRequestTrigger$.next();
  }

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

对应的QuoteService示例（确保用最新的HttpClient）：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Quote } from "./quote.interface";

@Injectable({
  providedIn: 'root'
})
export class QuoteService {
  constructor(private http: HttpClient) {}

  getQuotes() {
    return this.http.get<Quote[]>('/api/quotes');
  }
}

原理说明： #

switchMap的核心逻辑是：每当源Observable（这里是quoteRequestTrigger$）发出新值，它就会取消之前通过switchMap创建的Observable（也就是前一次的HTTP请求），然后订阅新的Observable（新的HTTP请求）。这样就保证了同一时间只有最新的请求在运行，前一次未完成的请求会被自动终止。

如果你的需求是“前一次请求没完成时，直接忽略新请求”而不是终止前一次，那把switchMap换成exhaustMap就行，它会在当前请求未完成时，直接跳过后续的触发信号。

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