角度2のサーバー接続エラー（404ステータス）を検出しました

Question

サーバーへの接続エラーを検出して、ユーザーに適切なメッセージを表示できるようにしたいとします。

バックエンドサーバー（Web API）がオフになっていて、http.getを使用してこのサーバー上のメソッドにアクセスしようとしていますが、404状態の応答または何らかの接続エラー。

明らかではないが、代わりに私が

"：URL 0 NULLステータスとレスポンス" を取得しています。 代わりに、どうやって接続エラーを検出できますか？

ログインコンポーネント：：

this.loginService.tryLogin(userName, password).subscribe(_loginStatus => { 
    //Some operations 
}, 
_err => this.errMsg = _err; // this.errMsg will be displayed to the user 
); 

ログインサービス

tryLogin(user: string, pwd: string): Observable<LoginStatus> { 
return this.http.get(this.serverUri + `Login/?username=${user}&password=${pwd}`) 
    .map(response => response.json()) 
    .catch(err => this.handleError(err)); 
} 

private handleError(error: any) { 
    const err = (error.json() ? error.json() : error); 
    console.log(err); 
    return Observable.throw(err); 
} 

Answer 1

あなたがここにHttp Interceptorsを利用することができます

これは、関連するコードです。新しいHttpClientModuleのインターセプタを使用するのは簡単です。

import { Observable } from 'rxjs'; 
import {Injectable} from '@angular/core'; 
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http'; 
import { HttpErrorResponse } from "@angular/common/http"; 

@Injectable() 
export class AngularInterceptor implements HttpInterceptor { 
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    return next.handle(req).do(event => {}, err => { 
     if(err instanceof HttpErrorResponse){ // here you can even check for err.status == 404 | 401 etc 
      console.log("Error Caught By Interceptor"); 
      //Observable.throw(err); // send data to service which will inform the component of the error and in turn the user 
     } 
    }); 
    } 
} 

Httpクライアントの詳細情報については

providers: [ 
     [ { provide: HTTP_INTERCEPTORS, useClass: 
       AngularInterceptor, multi: true } ] 
    ], 

ようAppmoduleでこれを登録し、インターセプタはこのlink