如何为 Angular 2 个 HTTP 调用添加延迟

Question

我正在使用 Angular 2 和 TypeScript 来实现一个使用 HTTP 调用 REST 服务器的 Web 应用程序。

问题是某些 GET 调用比其他调用更快，我必须在它们之前添加一些延迟。我怎样才能消除这种延迟并妥善处理这个问题？

例如，在我删除一个制造商后（在下面的代码中），我必须返回到可以看到所有制造商的视图（我在 ngOnInit() 中实现了 GET 调用）。

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

您应该 Angular 2 仅在请求成功完成后导航，因此：

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

如何为 Angular 2 个 HTTP 调用添加延迟

How to add a delay for Angular 2 HTTP calls

typescript

angular2-http

angular