HttpInterceptor 拦截器 - 网络请求超时与重试的简单实现

...

拦截器在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<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        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