Angular 4- HTTP拦截器
Angular 4- HTTP拦截器
提问于 2017-06-07 02:05:22
我试图在Angular 4中创建HTTP Interceptor，但是我遇到了一些奇怪的错误。以下是我的错误：
Argument of type 'Observable<Response>' is not assignable to parameter of type 'Observable<Response>'.以下是我的代码：
import { Injectable } from '@angular/core';
import { Http, ConnectionBackend, RequestOptions, RequestOptionsArgs } from '@angular/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import * as _ from 'lodash';
@Injectable()
export class HttpInterceptor extends Http {
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _router: Router) {
super(backend, defaultOptions);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.request(url, options)); // Here is the error
}
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.get(url, options)); // Here is the error
}
post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.post(url, body, this.getRequestOptionArgs(options))); // Here is the error
}
put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.put(url, body, this.getRequestOptionArgs(options))); // Here is the error
}
delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.delete(url, options)); // Here is the error
}
getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
if (options == null) {
options = new RequestOptions();
}
if (options.headers == null) {
options.headers = new Headers(); // Here is the error
}
options.headers.append('Content-Type', 'application/json');
return options;
}
intercept(observable: Observable<Response>): Observable<Response> {
return observable.catch((err, source) => {
if (err.status == 401 && !_.endsWith(err.url, 'api/auth/login')) {
this._router.navigate(['/login']);
return Observable.empty();
} else {
return Observable.throw(err);
}
});
}
}
有人知道这里出了什么问题吗？我试着调试了3个小时，但没有找到任何线索。
编辑：
我还尝试删除所有内容，并编写了如下代码：
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
return super.request(url, options);
}
但它仍然给出了相同的错误：
Argument of type 'string | Request' is not assignable to parameter of type 'string | Request'. Type 'Request' is not assignable to type 'string | Request'.
回答 5
Stack Overflow用户
回答已采纳
发布于 2017-08-13 16:51:21
在Angular 4.3.4中已经实现了Http拦截器，并在documentation中对其进行了描述。
您需要实现HttpInterceptor接口的intercept方法，对请求执行一些操作，并调用next.handle(req)方法。
import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
@Injectable()
export class NoopInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const changedReq = req.clone({headers: req.headers.set('My-Header', 'MyHeaderValue')});
return next.handle(changedReq);
}
}还有必要在应用程序的提供者部分注册拦截器
import {NgModule} from '@angular/core';
import {HTTP_INTERCEPTORS} from '@angular/common/http';
@NgModule({
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: NoopInterceptor,
multi: true,
}],
})
export class AppModule {}Stack Overflow用户
发布于 2017-08-18 23:43:18
akn的答案是正确的。我试图让它与http服务一起工作，但拦截器只能与httpClient服务一起工作。
import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) { }Stack Overflow用户
发布于 2017-06-07 02:30:44
全球可用的DOM类型(您的tsconfig中的"lib": ["dom"])包括与Angular使用的类型无关的Response和Request接口。
您需要从@angular/http导入Response和Request。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44396890
复制相关文章
相似问题
腾讯云开发者
