So fügen Sie eine Verzögerung für Angular 2 HTTP-Aufrufe hinzu

Question

Ich verwende Angular 2 mit TypeScript, um eine Webanwendung zu implementieren, die HTTP-Aufrufe an einen REST-Server verwendet.

Das Problem ist, dass einige GET-Anrufe schneller sind als andere, und ich muss etwas Verzögerung vor ihnen hinzufügen. Wie kann ich diese Verzögerungen entfernen und dieses Problem richtig behandeln?

Zum Beispiel, nachdem ich einen Hersteller (im Code unten) gelöscht habe, muss ich zurück zu der Ansicht gehen, wo ich alle Hersteller sehen kann (dort implementiere ich den GET-Aufruf innerhalb der ngOnInit()).

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { DataService } from '../../../data/data.service'; 
import { CallManufacturerServices } from '../calls/calls.service'; 
import { ManufacturerClass } from '../class/manufacturer.class'; 

@Component({ 
    templateUrl: './app/inventory/manufacturer/view/view.component.html', 
    styleUrls: ['./app/inventory/manufacturer/view/view.component.css'], 
    providers: [CallManufacturerServices] 
}) 

export class ViewComponent implements OnInit, OnDestroy { 
    private sub: any; 
    private ServerData: ManufacturerClass = { 
     ManufacturerId: 0, 
     ManufacturerName: 'N/D', 
     ManufacturerWebSite: 'N/D' 
    }; 

    constructor(
     private route: ActivatedRoute, 
     private router: Router, 
     private data: DataService, 
     private calls: CallManufacturerServices) { 
    } 

    ngOnInit() { 
     this.sub = this.route.params.subscribe(params => { 
      let id = +params['id']; 
      this.getSingleManufacturer(id); 
     }); 
    } 

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

    private getSingleManufacturer(id: number) { 
     this.calls.GetSingleManufacturer(id).subscribe(
      (data) => { 
       this.ServerData = data.json(); 
      }, 
      error => console.log(error), 
      () => console.log('getSingleManufacturer complete!') 
     ); 
    } 

    private deleteManufacturer(_manufacturer: ManufacturerClass) { 
     this.calls.DeleteManufacturer(_manufacturer.ManufacturerId).subscribe(
      error => console.log(error), 
      () => console.log('deleteManufacturer complete!') 
     ); 
     /* this type of delay doesn't work */ 
     setTimeout(() => {}, 2000); // insert there the delay 
     /* when I go to Manufacturer the Get call will start */ 
     this.goToManufacturer(); 
    } 

    private goToManufacturer() { 
     this.router.navigate(['/inventory/manufacturer']); 
    } 

    private goToEdit(manufacturer: ManufacturerClass) { 
     this.router.navigate(['/inventory/manufacturer/edit', manufacturer.ManufacturerId]); 
    } 
} 

Answer 1

Sie sollten nur Angular 2 navigate haben, nachdem die Anforderung so erfolgreich vervollständigt:

this.calls.DeleteManufacturer(_manufacturer.ManufacturerId).subscribe(
 
     undefined, // onNext handler 
 
     error => console.log(error), // onError handler 
 
     () => { // onComplete handler 
 
      console.log('deleteManufacturer complete!'); 
 
      this.goToManufacturer(); 
 
     } 
 
    );