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().toPromise()...之后，才必须将Observable转换为Promise，但最佳做法是尝试理解Observables并且避免将它们变成Promise，因为你失去了太多的力量。

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

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

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

Angular 4：在路由更改时中止所有待处理的$ http请求

1 个答案: