Как добавить задержку для угловых 2 HTTP-вызовов

Question

Я использую Angular 2 с TypeScript для реализации веб-приложения, которое использует HTTP-вызовы на сервере REST.

Проблема в том, что некоторые вызовы GET быстрее других, и я должен добавить некоторую задержку перед ними. Как я могу удалить эти задержки и правильно обработать эту проблему?

Например, после удаления одного производителя (в приведенном ниже коде) мне нужно вернуться к представлению, где я могу увидеть все Производители (там я реализую вызов GET внутри 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

Вы должны иметь угловую 2 Перейдите только после того, как запрос завершается успешно, таким образом:

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