Angular 4: abbrechen alle ausstehenden $ HTTP-Anfragen auf Routenänderung

Question

Ich habe eine DataService, zB .:

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); }); 
    } 
} 

diese DataService wird viele Male in jeder Route genannt. Wenn der Benutzer die Route ändert, können so viele Anfragen ausstehen, und ich möchte alle ausstehenden Anfragen der alten Route abbrechen.

Ich bin neu auf Angular 4, was ist der richtige Ansatz?

Answer 1

So haben Sie Ihren Datenservice eingerichtet und Ihre Methode getData() wird eine HTTP-Anfrage, wo immer Sie es nennen.

Angenommen, Sie nennen diese Methode innerhalb HeroListComponent. Diese Komponente verfügt über einige Lebenszyklusmethoden. Eine davon ist onNgDestroy, die Sie für Ihre Löschungslogik verwenden können. Diese Methode wird automatisch von Angular aufgerufen, wenn Sie von dieser Komponente weg navigieren.

So innerhalb HeroListComponentngOnInit Methode Sie machen den HTTP-Aufruf und innerhalb der ngOnDestroy Sie abmelden von ihm. Ich habe den Code nicht getestet, aber da Sie Ihr Observable in ein Versprechen in Ihrem DataService umgewandelt haben, bin ich mir nicht sicher, ob Sie sich noch abmelden können. Wenn es nicht funktioniert, müssen Sie das Observable erst dann in ein Versprechen umwandeln, wenn Sie den Verweis innerhalb der Komponente ngOnInit wie this.dataSubscription = this.dataService.getData().toPromise()... gespeichert haben, aber versuchen Sie immer noch, Observables zu verstehen und vermeiden Sie, sie in Promises zu verwandeln, weil Sie so verlieren viel Kraft.

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

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

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