web-dev-qa-db-fra.com

Angular 5+: Comment mettre un délai à une/toutes les requêtes HttpClient?

J'ai ce code:

this.loading = true;
this.http.get<IUser[]>(Urls.users())
            .subscribe(
                response => {
                    this._values = <IUser[]>response;
                    this.root.next({'users': this._values});
                },
                e => console.log(e),
                () => this.loading = false
            );

La page qui appelle ce code a une icône qui indique que "chargement" est défini sur "vrai". Mais lorsque la demande est terminée en moins de 0,5 seconde, le disque est à peine visible et il a l’air bizarre sur la page.

Comment puis-je faire cette demande attendre 1 seconde avant de terminer (sans utiliser setTimeout ())?

Existe-t-il un moyen de retarder toutes les demandes http sans avoir à modifier tous les codes comme celui ci-dessus?

angularrxjs
6
Wolf359

J'ai fini par utiliser un opérateur HttpInterceptor + delay (merci @ Faisal): C'est la solution à ma question, mais ce n'est pas nécessairement la meilleure expérience utilisateur. Veuillez consulter le commentaire de @AlexanderLeonov à ce sujet.

// ANGULAR
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';

// OBSERVABLES
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/delay';

@Injectable()
export class DelayInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log(request);
        return next.handle(request).delay(500);
    }
}
2
Wolf359

Utilisez rxjs/delay:

this.http.get(...).delay(500).subscribe(...);

En angulaire 6+:

this.http.get(...).pipe(delay(500)).subscribe(...);
10
Phil