角度4：例えば、ルート変更

Question

上のすべての保留中の$ HTTPリクエスト私は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は、各ルートで何度も呼び出されます。ユーザーがルートを変更すると、多くのリクエストが保留になる可能性があります。古いルートのすべての保留中のリクエストを中止したいと考えています。

私は角度4で新しいです、正しいアプローチは何ですか？

Answer 1

データサービスが設定されていて、getData()メソッドを呼び出すと、どこでもhttp要求が行われます。

このメソッドをHeroListComponentの内部で呼び出すとしましょう。このコンポーネントにはいくつかのライフサイクルメソッドがあり、そのうちの1つはonNgDestroyであり、これを使用してキャンセルロジックを実行できます。このメソッドは、このコンポーネントから移動するときに、Angularによって自動的に呼び出されます。

このように、HeroListComponentngOnInitメソッドでは、HTTP呼び出しを行い、ngOnDestroyの中から退会します。私はコードをテストしませんでしたが、ObservableをDataService内のPromiseに変換するので、まだ退会できるかどうかはわかりません。それがうまくいかない場合は、ngOnInitのようなコンポーネント内の参照をthis.dataSubscription = this.dataService.getData().toPromise()...のように保存した後でObservableをPromiseに変換する必要がありますが、Observableを理解し、Promisesへの変換を避けてください多くのパワー。

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

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

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