聊一聊Angular的HttpInterceptor与Http请

上一章讲了HttpInterceptor大概是啥玩意儿的，这一章我们期待的实操来了，听我细细道来

在大多数情况下我们写的Http请求都能正常的得到结果，但是总会是有那么些不听话的情况，比如说网络情况比较差的情况下，Ajax请求很可能就会超时错误，那么万一分分钟后用户的网络又可以了，如果我们不给它自动续1s，那么用户很可能就会骂我们啥破xxx。

直接重试

使用rxjs的retry操作符，传入一个重试次数，如果http请求失败了会立刻进行重试

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req)
        .pipe(
            tap(()=>{
                console.log('http send')
            }),
            retry(1)
        )
    }

这种情况非常的简单粗暴，但是有时候如果摔倒了，马上爬起来那多半会在摔倒一次。我们希望能够等待一段时间过后，在地上把屁股坐热了在起来重试。

延迟重试

延迟重试首先想到的是retryWhen操作符

retryWhen操作符有以下几个特点

• 接受一个函数fn作为参数
• fn有一个参数error不是一个错误对象，而是错误组成的Observable
• fn需要返回一个Observable对象，由这个Observable决定何时进行重试

举个栗子

const source$ = new Suject();

source$
    .pipe(
        .............
    )
    .retryWhen(err$=>err$.delay(1000))

如果发生错误，那么会在1s后对source$进行重新订阅重试，让上游的Observable重新走一遍。

带延迟的重试已经搞定了，但是我们还是不够的，毕竟我们还是应该有摔倒次数的，多摔几次干脆就不爬起来了。

带重试次数的延迟重试

首先我们大概是需要这样一个结构

retryWhen((error$: Observable<any>) =>
    error$
        .pipe(
            mergeMap(e => {
                if (retries-- > 0) {
                    of(e)
                } else {
                    throw e;
                }
            })
        )
)

有个retires控制重试的次数，当次数清零了就抛出异常不在进行重试。但是这个变量总不能是全局变量吧。大概猜一下呢，应该用闭包来做嘛，这个时候就需要我们自定义一个rxjs的操作符来完成这些事情了。

自定义操作符主要是做以下两个操作

• 对上游的Observable进行订阅
• 返回一个全新的Observable

所以我们是不是可以干点事情

export function retryWithCount(delayMs: number,maxRetry:number) {
    let retries = maxRetry;
    return (src: Observable<any>) => 
        src.pipe(
            retryWhen((error$: Observable<any>) =>
                error$
                    .pipe(
                        mergeMap(e => {
                            if(retries-- > 0){
                                return of(e);
                            }else{
                                throw e;
                            }
                        })
                    )
            )
        )
}

retryWithCount接受delay和maxRetry两个参数，分别代表延迟时间和重试次数，并返回了一个函数,这个返回的函数就是我们的自定义操作符，src是上游的Observable对象，这样就通过闭包的形式，让每个Http请求都独立含有自己的重试次数和延迟时间。

最后使用上加强版的重试

        return next.handle(clone)
            .pipe(
                timeout(60000 * 5)
            )
            .pipe(
                retryWithCount(1000,1)
            )
            .pipe(
                catchError((err:HttpErrorResponse)=>{

                })
            )