摘要：對象表示攔截器鏈表中的下一個攔截器。至此，攔截器只會再重試到最大次數還是失敗的情況下拋出超時錯誤。完成上述步驟，一個簡單的網絡請求超時與重試的攔截器便實現了。

攔截器在Angular項目中其實有著十分重要的地位，攔截器可以統一對 HTTP 請求進行攔截處理，我們可以在每個請求體或者響應后對應的流添加一系列動作或者處理數據，再返回給使用者調用。

每個 API 調用的時候都不可避免的會出現網絡超時的情況，但是這種情況是多變的，可能是網絡問題，也有可能是服務端問題，盡管如此，我們也只需對網絡超時這一種情況來進行處理。

import {
    HttpInterceptor,
    HttpRequest,
    HttpHandler,
    HttpEvent
} from "@angular/common/http"
import { Injectable } from "@angular/core"
import { Observable } from "rxjs"
import { timeout } from "rxjs/operators"

/** 攔截器 - 超時以及重試設置 */
@Injectable()
export class TimeoutInterceptor implements HttpInterceptor {

    constructor() { }

    intercept(req: HttpRequest, next: HttpHandler): Observable> {
        return next.handle(req)
    }
}

rxjs確實功能強大，這里的超時我們只需要使用timeout操作符便可以實現。這里的超時處理邏輯是掛到next.handle()返回的可觀察對象中。

next 對象表示攔截器鏈表中的下一個攔截器。 這個鏈表中的最后一個 next 對象就是 HttpClient 的后端處理器（backend handler），它會把請求發給服務器，并接收服務器的響應。
大多數的攔截器都會調用 next.handle()，以便這個請求流能走到下一個攔截器，并最終傳給后端處理器。

先在類外部定義一個超時時限

/** 超時時間 */
const DEFAULTTIMEOUT = 8000

在攔截器主函數handle流中加入操作符

return next.handle(req).pipe(
    timeout(DEFAULTTIMEOUT)
)

其實這樣就實現了超時攔截器，當超過設定的時間還沒有響應數據的時候，handle流便會在拋出相應的超時錯誤。

在超時錯誤發生后，我們可能需要第一時間捕獲到以便給用戶一個提示。這里可以直接使用catchError操作符。

在攔截器主函數handle流中加入操作符

return next.handle(req).pipe(
    //... 已有的代碼忽略
    catchError((err: HttpErrorResponse) => {
        this.nzNotificationService.error("網絡超時","請重試")
        return throwError(err)
    })
)

handle需要返回一個可觀察對象，所以我們順便把捕獲的錯誤返回。這樣一來，便可以在捕獲到超時的時候顯示一個簡單的提示。

一般來說，超時出現的情況是不確定的，即使多了提示，有些請求用戶也沒有其他的動作去重試，只能刷新頁面，那此時重新請求就顯得重要了，我們可以在捕獲到超時請求之后對這個請求再進行固定次數的重試，避免某些情況的超時影響用戶體驗。

對流進行多次重試，可以使用retryWhen操作符。

retryWhen操作符接受一個函數作為參數，這個函數會接受一個由一組錯誤組成的Observable，我們可以針對這個Observable做一些節奏控制來促動重試動作，然后在函數中返回這個可觀察對象。

一個簡單的retryWhen組成：

retryWhen(err$ => {
    return err$.pipe(
        //一些節奏控制
        ...
    )
})

如此以來，我們就可以直接使用此操作符來實現了。

我們在next.handle流掛上retryWhen操作符

return next.handle(req).pipe(
    //... 已有的代碼忽略
    retryWhen(err$ => {
        return err$
    })
)

其實此時就已經實現了重試機制，但是運行結果你會發現，當超時錯誤永遠存在時，重試的次數是無限的，也就是程序會不斷得請求，因為我們還沒有做任何的節奏控制。

那么，我們就需要先確定一下重試的節奏，比如最大的重試次數、每次延遲多久重試、重試上限次數還是失敗了的處理等等。那就簡單處理提到的這3個情況吧。

既然retryWhen中err$是一個錯誤組成的流，那么每一次超時重試失敗后，err$便會推動一次數據，我們可以使用scan操作符來累計獲取重試失敗的次數，以此來控制重試的最大次數。

scan操作符接受兩個參數，第一個是累加函數，可以在函數中獲取上一次scan的累加值以及所在流的數據，第二個值接受一個scan的初始累加值，所以可以很輕松地獲取重試錯誤的次數。

在攔截器類外部定義一個最大重試次數：

/** 最大重試次數 */
const MAXRETRYCOUNT = 3

我們在retryWhen中掛上scan操作符

return next.handle(req).pipe(
    //... 已有的代碼忽略
    retryWhen(err$ => {
        return err$.pipe(
            scan((errCount, err) => {
                if (errCount >= MAXRETRYCOUNT) {
                    throw err
                }
                return errCount + 1
            }, 0)
        )
    })
)

在scan中，我們獲取了累加值(errCount，初始為0 )，判斷是否大于上限，如果大于便直接拋出超時錯誤（err），如果小于便返回累加值 +1。至此，攔截器只會再重試到最大次數還是失敗的情況下拋出超時錯誤。

重試最好加上延遲，避免某些場景下一定請求錯誤的情況，比如服務器的某些請求過濾。延遲十分簡單，只需要在err$掛上delay操作符，流的推動便會以一定的間隔實行。

return next.handle(req).pipe(
    //... 已有的代碼忽略
    retryWhen(err$ => {
        return err$.pipe(
            //... 已有的代碼忽略
            delay(1000)
        )
    })
)

可能有的時候網絡太慢，或者重試次數設置得比較大，這樣在請求重試的時候會耗時比較久，而用戶是不知道此時正在重試的，所以加一個友好的提示可以增加用戶體驗。

而添加提示是屬于比較透明或者說屬于副作用動作，此時我們可以直接使用tap操作符來進行操作。由于是掛到scan之后，所以在tap中獲取到的就是重試的累加值。

return next.handle(req).pipe(
    //... 已有的代碼忽略
    retryWhen(err$ => {
        return err$.pipe(
            //... 已有的代碼忽略
            tap(errCount => {
                if(errCount == 1){
                    //第一次重試時顯示友好信息
                    this.nzNotificationService.info("網絡超時","正在重新請求中...")
                }
            })
        )
    })
)

這樣當第一次重新請求時，我們便給出明確的提示。

前面我們在沒有重試功能之前設置了捕獲錯誤，并給出提示。由于后面加了重試功能，故捕獲錯誤的操作需要掛到重試之后，這樣一來，才可以在全部重試完成后仍然失敗的情況下提示用戶，而不是每次重試都給出捕獲到的錯誤提示。

return next.handle(req).pipe(
    timeout( ... ),
    retryWhen( ... ),
    catchError( ... )
)

完成上述步驟，一個簡單的網絡請求超時與重試的攔截器便實現了。完整的代碼如下：

import {
    HttpInterceptor,
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpErrorResponse
} from "@angular/common/http"
import { Injectable } from "@angular/core"
import { 
    Observable, 
    throwError 
} from "rxjs"
import { 
    timeout, 
    delay, 
    retryWhen, 
    scan, 
    tap, 
    catchError 
} from "rxjs/operators"
import { NzNotificationService } from "ng-zorro-antd"

/** 超時時間 */
const DEFAULTTIMEOUT = 8
/** 最大重試次數 */
const MAXRETRYCOUNT = 3

//攔截器 - 超時以及重試設置
@Injectable()
export class TimeoutInterceptor implements HttpInterceptor {

    constructor(
        private nzNotificationService:NzNotificationService
    ) { }

    intercept(req: HttpRequest, next: HttpHandler): Observable> {
        return next.handle(req).pipe(
            timeout(DEFAULTTIMEOUT),
            retryWhen(err$ => {
                //重試 節奏控制器
                return err$.pipe(
                    scan((errCount, err) => {
                        if (errCount >= MAXRETRYCOUNT) {
                            throw err
                        }
                        return errCount + 1
                    }, 0),
                    delay(1000),
                    tap(errCount => {
                        //副作用
                        if(errCount == 1){
                            //第一次重試時顯示友好信息
                            this.nzNotificationService.info("網絡超時","正在重新請求中...")
                        }
                    })
                )
            }),
            catchError((err: HttpErrorResponse) => {
                this.nzNotificationService.error("網絡超時","請重試")
                return throwError(err)
            })
        )
    }   
}

詳細攔截器說明請前往官網文檔：攔截請求和響應