angular - style - ¿Cómo reducir la velocidad/esperar antes de llamar a mi api?

ng-style conditional

Question

Feliz navidad para ti compañero
Mi aplicación Angular 4 no esperará.

Quiero reducir la velocidad antes de que API llame.
Pero sigo golpeando una pared.

Estoy usando un HttpInterceptor en mi código.
pero estos Observables simplemente explotarán.

Para no tener demasiado desprecio.
A continuación encontrarás mi intento.

export class ApiUrlInterceptor implements HttpInterceptor {

    constructor(private http: Http) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return Observable.create(observer => {
            setTimeout(() => {
                observer.next(true); //Not sure why I do this
                const start = Date.now();
                console.log(`Request for ${req.url}`);
                return next.handle(req).do(event => {
                    if (event.type == HttpEventType.Response) {
                        const elapsed = Date.now() - start;
                        console.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
                    }
                });
            }, 1000);
        });
    }
}

El resultado es que se llama a la API.
pero no se ha instalado ningún resultado para la persona que llama

Mi observable parece estar atascado.
y me estoy quedando sin suerte.

Soy consciente de que este es un antipatrón en Angular "no espere un número aleatorio", en lugar de eso, estructure su aplicación para que no sea necesario. Mi caso de uso real fue que en HttpInterceptor necesito algunas cosas que están cargadas por otro Observable, normalmente no tengo problemas, solo si los usuarios actualizan una página en particular, tengo el riesgo de que las cosas no se hayan cargado.

Mi "solución rápida" enseñada directamente fue cómo hago un si y si no estoy cargado, espero un poco ("dale tiempo para cargar") y luego prosigo, ¡a quién le importa! el usuario no actualizará ese enlace angular particular a menudo. Terminé el camino largo Mover todo a una config.ts y utilizar APP_INITIALIZER . Sin embargo, aún así, quiero saber cómo esperar un tiempo si me gusta esperar, de ahí este ejemplo mínimo.

Answer 1

No se desesperen
En su lugar aquí tienen una mirada

import { timer } from ''rxjs/observable/timer'';
// or import { TimerObsevable } from ''rxjs/observable/TimerObsevable'';

export class PreRequestDelayInterceptor implements HttpInterceptor {

    constructor(@Inject(PRE_REQUEST_DELAY)@Optional() private delay = 1000) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       const delay = timer(this.delay);
       const start = Date.now();
       return delay.switchMap(()=> next.handle(req))
       .do(event => {
            if (event.type == HttpEventType.Response) {
               const elapsed = Date.now() - start;
               console.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
            }
        });
    }
}

Al utilizar un InjectionToken puede inyectar un retraso fijo. Si no se proporciona ninguno, 1000 será el retraso predeterminado.