角9取消HTTP请求

Question

角9

当用户单击按钮时，我想实现取消api请求的函数。我使用的是“订阅”，所以我认为“取消订阅()”会运行得很好，但并不像我预期的那样。

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

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

在这段代码中，如下面所示，我调用了“un订阅()”来取消调用的请求。实际上，在调用“取消订阅()”之后，很快就会到达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');
    });
  }
}

输出量

点击

搜索。

取消点击。

完成了。

没有订阅。

{status: true，statusMessage：“获取成功的项”，data: Array10}。

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

谢谢您的帮助，提前。

Answer 1

您可以将来自rxjs的rxjs与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();
  }
}