Angular 9 取消 HTTP 请求

Question

Angular 9

我想实现在用户单击按钮时取消 api 请求的功能。我正在使用“订阅”，所以我认为“取消订阅()”会很好用，但并不像我预期的那样。

这是一个 stackblitz 示例代码，它调用/取消 api 请求，响应将显示在控制台中。

https://stackblitz.com/edit/angular-cancel-pending-http-requests-yavvkb

在这段代码中，如下所示，我调用了“unsubscribe()”来取消调用的请求。其实在调用“unsubscribe()”之后，很快就到达了add()。但不久之后，它收到了实际的 API 响应。

export class SearchService {
  private foo: any = null;
  constructor(private apiService: ApiService) { }

  public getItemList() {    
    this.fetchData();
  }
  public cancel() {
    if(this.foo != null) {
      this.foo.unsubscribe();
      console.log('unsubscribed');    
    }
  }

  private fetchData(){
    const endPoint: string = 'https://www.mocky.io/v2/5c245ec630000072007a5f77?mocky-delay=2000ms';
    this.foo = this.apiService.getData(endPoint).subscribe((resp)=>{
      console.log(resp);
    },(err)=>{
      console.log(err);
    }).add(() => {
      this.foo = null;
      console.log('complete');
    });
  }
}

输出是

search clicked.
cancel clicked.
complete.
unsubscribed.
{status: true, statusMessage: "Items fetched successfully", data: Array[10]}.

取消后，我不想收到回复，因为这是“取消”的目的。但我不知道该怎么做。

提前感谢您的友好帮助。

Answer 1

您可以将 rxjs 中的 takeUntil() 与 Subject 一起使用。

我做了一个示例 stackblitz 来展示这种方法:https://stackblitz.com/edit/angular-ivy-8vejbb?file=src/app/app.component.ts

import { Component } from '@angular/core';
import { Observable, Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  private m_unsubscribe: Subject<void> = new Subject();

  private m_fakeObsCallSource: Subject<void> = new Subject();
  private fakeObsCall$: Observable<void> =
    this.m_fakeObsCallSource.asObservable();

  public sendDataToAPI(): void {
    console.log('API call started');

    this.fakeObsCall$.pipe(takeUntil(this.m_unsubscribe)).subscribe(
      () => console.log('API Call returned data!'),
      (error) => {
        console.log('API Call ran into a problem!'),
          () => {
            console.log('API Call completed!');
          };
      }
    );

    setTimeout(() => {
      this.m_fakeObsCallSource.next();
    }, 3000);
  }

  public unsubscribe(): void {
    console.log('Unsubscribed!');
    this.m_unsubscribe.next();
  }
}