Loader Using HttpClient Interceptor Angular 4

Question

Comment puis-je implémenter un chargeur en utilisant Angular 4 HttpClient Interceptor? J'ai fait la connexion et attachant l'en-tête d'autorisation et je me demande si je peux également faire la "fonction de chargeur" ​​si des données se chargent dans le processus? Je voudrais joindre un chargeur d'icône qui signale si certaines données sont en cours de chargement. Voici mon auteur d'auteur ci-dessous.

export class GithubAuthInterceptor implements HttpInterceptor { 
    intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    const authReq = req.clone({ 
     headers: req.headers.set('Authorization', 'token') 
    }); 
    return next.handle(authReq); 
    } 
} 

Answer 1

Juste à cause de cette question, je ne vais pas passer par la création d'un chargeur, et juste parler de la façon dont vous mettre en œuvre un chargeur existant dans l'intercepteur. Chaque fois que vous passez un appel, la fonction intercept() est appelée. Cela signifie que, au début de la fonction intercept(), vous devez afficher un chargeur utilisant un LoaderService injecté, dans lequel le travail sera d'afficher et de masquer un chargeur selon qu'un appel a été effectué et quand il a été effectué.

constructor(private loaderService: LoaderService) { 
} 

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    this.loaderService.show(); 
    const authReq = req.clone({ 
    headers: req.headers.set('Authorization', 'token') 
    }); 
    return next.handle(authReq); 
} 

Ensuite, vous devez vous assurer que le chargeur est masqué une fois l'appel terminé. Vous pouvez le faire avec l'opérateur do.

return next.handle(authReq) 
    .do(
    (response) => { 
    if (response instanceof HttpResponse) { 
     this.loaderService.hide(); 
    } 
    }, 
    (error) => { 
    this.loaderService.hide(); 
    }); 

Assurez-vous d'importer l'opérateur do: import "rxjs/add/operator/do";

Pourquoi avez-vous de vérifier if (event instanceof HttpResponse)? C'est parce que le HttpInterceptor intercepte tous HttpEvent s. Cela inclut le HttpSentEvent, HttpProgressEvent, etc, mais vous ne voulez pas cacher le chargeur lors de la réception de ces types d'événements. Seulement une fois que vous recevez réellement une réponse. Et, bien sûr, vous allez cacher le chargeur si vous recevez une erreur. Vous pouvez également mettre tous les autres processus à votre disposition dès réception d'une réponse dans le bloc do. Par exemple, stocker un jeton d'authentification quelque part.

Pour la façon de créer votre propre chargeur, j'ai trouvé un article qui passe par les étapes de création et d'implémentation d'un chargeur. Vous pouvez l'utiliser comme guide pour créer un chargeur. Vous pouvez simplement ignorer les parties de l'implémenter avec un HttpService personnalisé parce que vous n'en aurez pas besoin puisque vous utilisez le nouveau Angular HttpClient.