可以取消HttpClient GET请求吗？

Question

我运行一个内部Angular项目，想向其中引入“取消请求”按钮。 我们有一个带有一堆参数的搜索功能，但是这些请求最多可能需要两位数的秒数（10及以上）。 通常，当有人在搜索字段中键入过于明确的内容时就会发生这种情况，因为我们进行的是“包含”搜索。

我希望能够取消这些请求，因此返回到组件时我的代码无法执行。 这样，我可以快速取消请求并发送新请求。

现在，我将按钮设置为“禁用”，因此用户无法轻松发送新请求。 如果我不这样做，则会发生以下问题：

1. 发送请求_1
2. 发送请求_2
3. request_2在3秒内完成，并在页面上显示结果
4. request_1在10秒内完成并替换页面上的结果

显然，这不是最佳选择。

要使用的代码（单击Get stuff按钮，然后出现取消按钮）： https : //stackblitz.com/edit/angular-cgmyvc

Answer 1

为了能够取消请求，您首先应该停止将observable转换为Promise，而是使用订阅。

您的服务应为：

export class TestService {
  constructor(private http: HttpClient) { }

  public GetStuff() {
    return this
      .http
      .get("https://jsonplaceholder.typicode.com/todos/1")
  }
}

现在，它返回一个可观察的而不是应许的。

然后在您的组件中：

export class AppComponent  {
  constructor(private service: TestService){}
  public request;
  public Result;
  public GettingStuff = false;

  async ngOnInit() {

  }

  public GetStuff() {
    this.GettingStuff = true;
    this.request = this.service.GetStuff().subscribe((res) => {
      this.Result = JSON.stringify(res);
      this.GettingStuff = false;
    })
  }

  public async CancelGettingStuff() {
    console.log('cancelled');
    this.request.unsubscribe();
    this.GettingStuff = false;
  }
}

如您现在所见，我将订阅放入变量request 。 如果有必要取消请求-我们只需调用一个unsubscribe方法。 这是工作中的闪电战 。 我建议在测试之前通过开发人员工具模拟缓慢的Internet。

每次按cancel按钮，您都会看到该请求被取消。

Answer 2

您必须像这样导入它：

import { Subscription } from 'rxjs/Subscription';

编辑角度6

import { Subscription } from 'rxjs';

import { Component } from '@angular/core';
import { TestService } from './services/test-service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private service: TestService){}
  public Result;
  public GettingStuff = false;
    res: Subscription;
  async ngOnInit() {

  }

  public async GetStuff() {
    this.GettingStuff = true;

     this.res = await this.service.GetStuff(); 
    console.log(this.res);
    this.Result = JSON.stringify(this.res);

    this.GettingStuff = false;
  }

  public async CancelGettingStuff() {
    this.res.unsubscribe();
    this.GettingStuff = false;
  }
}

希望这对你有用。

Answer 3

您可以使用switchMap运算符，该运算符将自动取消订阅先前的可观察对象。

你可以参考这个stackblitz

Answer 4

不确定是否可以通过promises来实现（可能不应该这样做），但是使用RxJS和Angular的HttpClient就像取消订阅一样简单：

// to send
const requestSubscription = this.httpClient.get(/* ...args */);

// to cancel
requestSubscription.unsubscribe();