Angular 角度5'；s拦截器：发出第二个请求并返回其结果，而不是第一个请求'；s结果

我刚刚将Angular应用程序从v4迁移到v5，我必须重写拦截器（通过扩展

Http

并重写

request

方法来实现），以使用

HttpInterceptor

接口

我要做的是截获带有201响应代码的请求，用响应头更新请求头，执行更新的请求并返回新的响应

我的代码当前看起来像：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const handled = next.handle(req);
    return handled.mergeMap(event => {
        // I only work when the response is arrived
        if (event.type === HttpEventType.Response) {
            // The 201 status code tells me I have to update my headers
            if (event.status === 201 && event.url.split('/').pop().toLowerCase() !== 'check') {
                this.authService.updateAuthentication(event.headers.get('new_token')); // update the cookie containing the token
                // I create the updated request
                const requestWithUpdatedHeaders = req.clone({ headers: this.appService.getHeaders() });
                // With this solution, the new request doesn't seem to be performed at all
                return next.handle(requestWithUpdatedHeaders);
                // With this one the request is performed but the result get in my components is null
                return this.http.request(requestWithUpdatedHeaders);               
            } else {
                return handled;
            }
        } else {
            return handled;
        }
    });
}

intercept（req:HttpRequest，next:HttpHandler）：可观察{
const handled=next.handle（请求）；
返回已处理的.mergeMap（事件=>{
//我只在收到回复后才工作
if（event.type==HttpEventType.Response）{
//201状态代码告诉我必须更新我的标题
if（event.status==201&&event.url.split（'/'）.pop（）.toLowerCase（）！==check'）{
this.authService.updateAuthentication（event.headers.get（'new_token'）；//更新包含该令牌的cookie
//我创建更新的请求
const requestWithUpdatedHeaders=req.clone（{headers:this.appService.getHeaders（）}）；
//使用此解决方案，新的请求似乎根本不会执行
返回next.handle（RequestWithUpdatedHeader）；
//使用这个函数，将执行请求，但在我的组件中得到的结果为null
返回此.http.request（requestWithUpdatedHeaders）；
}否则{
处理退货；
}
}否则{
处理退货；
}
});
}

---

我怎样才能使它工作呢？

我终于让它工作了

我的最终代码是：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next
        .handle(req)
        .mergeMap(event => {
            if (event instanceof HttpResponse && event.status === 201 && event.url.split('/').pop().toLowerCase() !== 'check') {
                if (event.body instanceof Blob) {
                    return this.userService.check()
                        .mergeMap(res => {
                            // update the cookie containing the token
                            this.authService.updateAuthentication(res.headers.get('new_token'));

                            const newReq = req.clone({ headers: this.appService.getHeaders() });
                            return next.handle(newReq);
                        });
                } else {
                    this.authService.updateAuthentication(event.headers.get('new_token'));

                    const newReq = req.clone({ headers: this.appService.getHeaders() });
                    return next.handle(newReq);
                }
            }
            return Observable.of(event);
        });
}

intercept（req:HttpRequest，next:HttpHandler）：可观察{
下一个返回
.句柄（req）
.mergeMap（事件=>{
if（HttpResponse和&event.status==201和&event.url.split（'/'）.pop（）.toLowerCase（）！==check'））{
if（Blob的event.body实例）{
返回此.userService.check（）
.mergeMap（res=>{
//更新包含令牌的cookie
this.authService.updateAuthentication（res.headers.get（'new_token'））；
const newReq=req.clone（{headers:this.appService.getHeaders（）}）；
返回next.handle（newReq）；
});
}否则{
this.authService.updateAuthentication（event.headers.get（'new_token'））；
const newReq=req.clone（{headers:this.appService.getHeaders（）}）；
返回next.handle（newReq）；
}
}
（事件）的可观测返回；
});
}

似乎将

next.handle（req）

存储在一个变量中，并在没有工作要做时返回它是一个糟糕的想法

希望我的痛苦至少能帮助别人：）