AngularJS5.0 (第四篇)--攔截器

開發過程當中，常常有在給後臺發請求的時候，設置請求頭信息（angular5的攔截器能夠很方便實現）

　　1，新建services/Interceptor.service.ts

　　

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
import { catchError } from 'rxjs/operators';
import { mergeMap } from 'rxjs/operators';

@Injectable()
export class InterceptorService implements HttpInterceptor {
    constructor( ) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // const authReq = req.clone({
        //     url: (req.url + '&token=ujusaruu19')  // 對任意請求的url添加token參數
        // });

        // return next.handle(authReq).pipe(mergeMap((event: any) => {
        //     if (event instanceof HttpResponse && event.status !== 200) {
        //         return ErrorObservable.create(event);
        //     }
        //     return Observable.create(observer => observer.next(event)); // 請求成功返回響應
        // }),
        //     catchError((res: HttpResponse<any>) => { // 請求失敗處理
        //         switch (res.status) {
        //             case 401:
        //                 break;
        //             case 200:
        //                 console.log('業務錯誤');
        //                 break;
        //             case 404:
        //                 break;
        //             case 403:
        //                 console.log('業務錯誤');
        //                 break;
        //         }
        //         return ErrorObservable.create(event);
        //     }));
        const Auth = `Bearer 3fba7ad7607aac6ca24a5c97dbdc7afce60c80b8`;
        req = req.clone({
            setHeaders: {
                Authorization: Auth,
                Accept: 'application/json',
                ddd: '123'
            }
        });
        return next.handle(req);
    }
}

在app.module.ts中注入攔截器：

　　import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'; /*攔截器和ajax模塊*/

　　

providers: [ /*定義的服務 回頭放在這個裏面*/

　　 {

　　　　provide: HTTP_INTERCEPTORS,

　　　　useClass: InterceptorService,

　　　　multi: true

　　},

　　LoginService

],