1

2

3

4

5

6

7

8

9

10

11

12

13

import { HttpClientModule } from '@angular/common/http';

@NgModule({

 imports: [

  BrowserModule,

  // import HttpClientModule after BrowserModule.

  HttpClientModule,

 ],

 declarations: [

  AppComponent,

 ],

 bootstrap: [ AppComponent ]

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

### base-interceptor.ts

import { Injectable } from '@angular/core';

import {

 HttpEvent, HttpInterceptor, HttpHandler, HttpRequest,

 HttpErrorResponse

} from '@angular/common/http';

import { throwError } from 'rxjs'

import { catchError, retry } from 'rxjs/operators';

/*設定請求的基地址，方便替換*/

const baseurl = 'http://localhost:8360';

@Injectable()

export class BaseInterceptor implements HttpInterceptor {

 constructor() {}

 intercept(req, next: HttpHandler) {

  let newReq = req.clone({

   url: req.hadBaseurl ? `${req.url}` : `${baseurl}${req.url}`,

  });

  /*此處設定額外的頭部，token常用於登陸令牌*/

  if(!req.cancelToken) {

  /*token資料來源自己設定，我常用localStorage存取相關資料*/

   newReq.headers =

   newReq.headers.set('token', 'my-new-auth-token')

  }

  // send cloned request with header to the next handler.

  return next.handle(newReq)

   .pipe(

    /*失敗時重試2次，可自由設定*/

    retry(2),

    /*捕獲響應錯誤，可根據需要自行改寫，我偷懶了，直接用的官方的*/

    catchError(this.handleError)

   )

 }

 private handleError(error: HttpErrorResponse) {

  if (error.error instanceof ErrorEvent) {

   // A client-side or network error occurred. Handle it accordingly.

   console.error('An error occurred:', error.error.message);

  } else {

   // The backend returned an unsuccessful response code.

   // The response body may contain clues as to what went wrong,

   console.error(

    `Backend returned code ${error.status}, ` +

    `body was: ${error.error}`);

  }

  // return an observable with a user-facing error message

  return throwError(

   'Something bad happened; please try again later.');

 };

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

### index.ts

import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { BaseInterceptor } from './base-interceptor';

/** Http interceptor providers in outside-in order */

export const httpInterceptorProviders = [

 { provide: HTTP_INTERCEPTORS, useClass: BaseInterceptor, multi: true },

];

/*

Copyright 2017-2018 Google Inc. All Rights Reserved.

Use of this source code is governed by an MIT-style license that

can be found in the LICENSE file at http://angular.io/license

*/

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

import { httpInterceptorProviders } from './http-interceptors/index'

@NgModule({

 declarations: [

  AppComponent

 ],

 imports: [

  BrowserModule,

  HttpClientModule

 ],

 providers: [

  httpInterceptorProviders

 ],

 bootstrap: [AppComponent]

})