typescript Angular 5 Interceptor: TypeError: next.handle(...).do 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48089608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 Interceptor: TypeError: next.handle(...).do is not a function
提问by Burning Crystals
I created an angular interceptor to check my auth tokens' validity. somehow, the domethod is not recognized by angular. subscribeworks, but I dont want that solution as it doubles my requests being sent to the server.
我创建了一个角度拦截器来检查我的身份验证令牌的有效性。不知何故，do角度无法识别该方法。subscribe有效，但我不想要该解决方案，因为它会将我发送到服务器的请求加倍。
TypeError: next.handle(...).do is not a function
at AuthTokenService.webpackJsonp.../../../../../src/app/commons/services/interceptors/auth-token.service.ts.AuthTokenService.intercept (auth-token.service.ts:37)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at XsrfService.webpackJsonp.../../../../../src/app/commons/services/interceptors/xsrf.service.ts.XsrfService.intercept (xsrf.service.ts:15)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at HttpXsrfInterceptor.webpackJsonp.../../../common/esm5/http.js.HttpXsrfInterceptor.intercept (http.js:2489)
at HttpInterceptorHandler.webpackJsonp.../../../common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at MergeMapSubscriber.project (http.js:1466)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.next (Subscriber.js:92)
here's my interceptor's code:
这是我的拦截器的代码：
import { Injectable, NgModule} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from
'@angular/common/http';
import { SessionService } from 'app/commons/services/auth/session.service';
import { HttpErrorResponse } from "@angular/common/http";
import { StateService } from '@uirouter/angular';
import 'rxjs/add/operator/do';
import * as _ from "lodash";
@Injectable()
export class AuthTokenService implements HttpInterceptor {
constructor(
private sessionService: SessionService,
private stateService: StateService
) {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const currUser = this.sessionService.getCurrentUser();
const authToken = _.get(currUser, ['auth_token'], null);
let dupReq = req.clone({ headers: req.headers.set('Authorization', '') });
if (!_.isNil(authToken)) {
dupReq = req.clone({ headers: req.headers.set('Authorization', `Token ${authToken}`) });
}
return next.handle(dupReq)
.do(ev => {
console.log(event);
})
}
};
I don't think i missed anything, but for some reason, it won't have the doside-effect mentioned in the guide
我不认为我错过了任何东西，但由于某种原因，它不会有指南中do提到的副作用
回答by Burning Crystals
Found out my mistake here. In angular 5, operators are changed to lettable operators. I don't quite get what they do yet, as I'm new to using this tech. But after a few hours of utter frustration looking at Angular 4 docs and answers about how interceptors work, I finally came across this article: Angular 5: Upgrading & Summary of New Features
在这里发现我的错误。在角度 5 中，运算符更改为lettable operators。我不太让他们做什么还没有，因为我是新来使用这种技术。但是在看了 Angular 4 文档和关于拦截器如何工作的答案几个小时后，我终于看到了这篇文章：Angular 5：新功能的升级和总结
My updated code:
我更新的代码：
import { map, filter, tap } from 'rxjs/operators';
@Injectable()
export class AuthTokenService implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const started = Date.now();
return next.handle(dupReq).pipe(
tap(event => {
if (event instanceof HttpResponse) {
const elapsed = Date.now() - started;
console.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
}
}, error => {
console.error('NICE ERROR', error)
})
)
}
}
catches errors from my http requests like a charm.
从我的 http 请求中捕获错误，就像一个魅力。
