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

攔截器在Angular項(xiàng)目中其實(shí)有著十分重要的地位，攔截器可以統(tǒng)一對 HTTP 請求進(jìn)行攔截處理，我們可以在每個請求體或者響應(yīng)后對應(yīng)的流添加一系列動作或者處理數(shù)據(jù)，再返回給使用者調(diào)用。

每個 API 調(diào)用的時候都不可避免的會出現(xiàn)網(wǎng)絡(luò)超時的情況，但是這種情況是多變的，可能是網(wǎng)絡(luò)問題，也有可能是服務(wù)端問題，盡管如此，我們也只需對網(wǎng)絡(luò)超時這一種情況來進(jìn)行處理。

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

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

    constructor() { }

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

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

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

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

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

在攔截器主函數(shù)handle流中加入操作符

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

其實(shí)這樣就實(shí)現(xiàn)了超時攔截器，當(dāng)超過設(shè)定的時間還沒有響應(yīng)數(shù)據(jù)的時候，handle流便會在拋出相應(yīng)的超時錯誤。

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

在攔截器主函數(shù)handle流中加入操作符

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

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

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

對流進(jìn)行多次重試，可以使用retryWhen操作符。

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

一個簡單的retryWhen組成：

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

如此以來，我們就可以直接使用此操作符來實(shí)現(xiàn)了。

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

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

其實(shí)此時就已經(jīng)實(shí)現(xiàn)了重試機(jī)制，但是運(yùn)行結(jié)果你會發(fā)現(xiàn)，當(dāng)超時錯誤永遠(yuǎn)存在時，重試的次數(shù)是無限的，也就是程序會不斷得請求，因?yàn)槲覀冞€沒有做任何的節(jié)奏控制。

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

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

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

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

/** 最大重試次數(shù) */
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。至此，攔截器只會再重試到最大次數(shù)還是失敗的情況下拋出超時錯誤。

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

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

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

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

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

這樣當(dāng)?shù)谝淮沃匦抡埱髸r，我們便給出明確的提示。

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

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

完成上述步驟，一個簡單的網(wǎng)絡(luò)請求超時與重試的攔截器便實(shí)現(xiàn)了。完整的代碼如下：

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
/** 最大重試次數(shù) */
const MAXRETRYCOUNT = 3

//攔截器 - 超時以及重試設(shè)置
@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$ => {
                //重試 節(jié)奏控制器
                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("網(wǎng)絡(luò)超時","正在重新請求中...")
                        }
                    })
                )
            }),
            catchError((err: HttpErrorResponse) => {
                this.nzNotificationService.error("網(wǎng)絡(luò)超時","請重試")
                return throwError(err)
            })
        )
    }   
}

詳細(xì)攔截器說明請前往官網(wǎng)文檔：攔截請求和響應(yīng)