ローダーHttpClientインターセプターを使用する角度4

Question

角度4のHttpClientインターセプターを使用してローダーを実装するにはどうすればよいですか？私はログインを行って、認証ヘッダーを添付し、私はまた、いくつかのデータがプロセスで読み込まれている場合私は "ローダー機能"を行うことができますか？いくつかのデータがロードされているかどうかを知らせるアイコンローダーを添付したいと思います。下に私のauthinterceptorがあります。

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

ただ、この質問のために、私はローダーの作成を通過するつもりはない、とちょうどあなたが迎撃に既存のローダーを実装する方法をについて話しています。電話をかけるたびに、intercept()関数が呼び出されます。つまり、intercept()関数の開始時に、呼び出しが行われたかどうか、および完了したかどうかに基づいて、ローダーを表示および非表示にするための注入されたLoaderServiceジョブを使用してローダーを表示する必要があります。

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); 
} 

次に、呼び出しが完了した後にローダーが非表示になっていることを確認する必要があります。 doオペレータでこれを行うことができます。

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

doオペレータインポートするようにしてください：あなたはif (event instanceof HttpResponse)チェックしなければならないのはなぜimport "rxjs/add/operator/do";

を？これは、HttpInterceptorがALL HttpEventをインターセプトするためです。これにはHttpSentEvent,HttpProgressEventなどが含まれますが、これらのイベントの受信時にローダーを非表示にしたくない場合があります。実際に応答を受け取った場合にのみもちろん、エラーが発生した場合は、ローダーを非表示にします。 doブロックに応答を受け取ったら、他のプロセスを実行することもできます。たとえば、Authトークンをどこかに格納します。

独自のローダーを作成する方法については、articleが見つかりました。ローダーの作成と実装の手順を実行します。これをローダーの作成のガイドとして使用することができます。カスタムHttpServiceで実装する部分は無視してもかまいません。新しくAngular HttpClientを使用しているので、その必要がないからです。