javascript - Angular 4 : abort all pending $http requests on route change

Question

我有一个DataService，例如:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class DataService {

  constructor(private http: Http) {}

  getData(): Promise<any[]> {
    return this.http.get('/api/data')
      .toPromise()
      .then(response => {
        const js_res = response.json();
        if ( js_res.data ){
          return js_res.data as any[];
        } else {
          throw new Error(js_res.info || response.text); 
        }
      })
      .catch( err => { console.log(err); });
  }
}

此DataService在每个路由中被调用多次。当用户更改路由时，很多请求可能处于待处理状态，我想中止旧路由的所有待处理请求。

我是 Angular 4 的新手，正确的方法是什么？

Answer 1

因此，您已经设置了数据服务，并且您的方法 getData() 无论您在何处调用它，都会发出 http 请求。

假设您在 HeroListComponent 内调用此方法。该组件有一些生命周期方法，其中之一是 onNgDestroy，您可以使用它来执行取消逻辑。当您离开此组件时，Angular 将自动调用此方法。

因此，在 HeroListComponent ngOnInit 方法中，您进行 HTTP 调用，并在 ngOnDestroy 中取消订阅。我没有测试代码，但由于您将 Observable 转换为 DataService 内的 Promise，我不确定您是否仍然可以取消订阅。如果它不起作用，则只有在将引用保存在组件 ngOnInit 中(例如 this.dataSubscription = this.dataService.getData())之后，才必须将 Observable 转换为 Promise。 toPromise()...，但最佳实践仍然是尝试理解 Observables 并避免将它们转换为 Promise，因为你会失去太多的力量。

class HeroListComponent implements OnInit, OnDestroy {
  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataSubscription = this.dataService.getData();
  }

  ngOnDestroy() {
    this.requestSubscription.unsubscribe();
  }
}