Angular 9取消HTTP请求

Question

角9

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

这是一个 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');
    });
  }
}

输出是

点击搜索。
取消点击。
完全的。
取消订阅。
{状态：true，statusMessage：“项目已成功获取”，数据：Array[10]}。

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

提前感谢您的好意帮助。

Answer 1

您可以将takeUntil()fromrxjs与 一起使用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();
  }
}