小编Ryo*_*Ryo的帖子

在 Angular 项目（Angular CLI：9.1.4）中，我有一个具有以下功能的组件：window.location.href = EXTERNAL_URL

a.组件.ts

import { Component, OnInit } from '@angular/core';
import { Service } from 'services/service';

@Component({
  selector: 'a',
  templateUrl: './a.component.html',
  styleUrls: ['./a.component.scss']
})
export class AComponent implements OnInit {
  constructor(private service: Service) {}

  ngOnInit(): void {}

  redirect() {
    window.location.href = 'https://sample.com'
  }
}

对于单元测试，我有 a.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { AComponent } from './A.component';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { HttpClientModule …

角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]}。

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

提前感谢您的好意帮助。