Angular2 - 如何中止/取消正在运行的 http 请求调用？

Question

我正在执行搜索自动完成。

keypress(valueSearch){
   // call Ajax search with ValueSearch
   // ....
}

每次按键事件时，我想取消旧的http请求。

Answer 1

事实上，您需要依赖从事件创建的可观察对象。如果您使用默认事件绑定(bind)，则无法访问此可观察对象。关于此问题还有待解决的问题:

• https://github.com/angular/angular/issues/5467
• https://github.com/angular/angular/issues/5467

现在您需要使用 @ViewChild 装饰器引用该元素并在其上配置一个可观察对象:

@ViewChild('someElt')
someElt: ElementRef;

ngAfterViewInit() {
  Observable.fromEvent(someElt.nativeElement, 'keyup');
}

现在您可以利用 switchMap 运算符来喜欢其上的 HTTP 请求。如果数据流中有正在进行的请求，则会被取消:

@ViewChild('someElt')
someElt: ElementRef;

ngAfterViewInit() {
  Observable.fromEvent(someElt.nativeElement, 'keyup').switchMap((evt) => {
    return this.http.get('something').map(res => res.json())
  }).subscribe(data => {
    // use data
  });
}