我试图通过拦截器实现HttpCache.以下是caching-interceptor.service.ts
import { HttpRequest,HttpResponse,HttpInterceptor,HttpHandler,HttpEvent } from '@angular/common/http' import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/do'; import 'rxjs/add/observable/of'; export abstract class HttpCache { abstract get(req: HttpRequest<any>): HttpResponse<any>|null; abstract put(req: HttpRequest<any>,resp: HttpResponse<any>): void; } @Injectable() export class CachingInterceptor implements HttpInterceptor { constructor(private cache: HttpCache) {} intercept(req: HttpRequest<any>,next: HttpHandler) : Observable<HttpEvent<any>> { if(req.method !== 'GET'){ return next.handle(req); } const cachedResponse = this.cache.get(req); if(cachedResponse){ return Observable.of(cachedResponse); } return next.handle(req).do(event => { if(event instanceof HttpResponse){ this.cache.put(req,event); } }) } }
我从test.service.ts打电话
import { Injectable } from '@angular/core'; import { Headers,Http,Response} from '@angular/http'; import { HttpClient} from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import { ReplaySubject } from 'rxjs/ReplaySubject'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { APIService } from './api.service'; import { CachingInterceptor } from './caching-interceptor.service'; import { ConfigurationService } from './configuration.service'; import { AuthenticationStatus,IAuthenticationStatus } from '../models'; import { User } from '../models/user.model'; @Injectable() export class PlatformService extends APIService { constructor(private http: Http,public httpClient: HttpClient,private configuration: ConfigurationService,public cachingInterceptor: CachingInterceptor) { super(); } getUserById(id: string) { console.log(this.requestOptions); return this.httpClient.get(this._getAPIUrl('user/' + id),this.requestOptions). subscribe(res => res); } get requestOptions(): RequestOptions { const tokenObj = window.localStorage.getItem('TOKEN'); const token = JSON.parse(tokenObj); const headers = this.headers; headers.append('Authorization','Bearer ' + token.token); headers.append('Access-Control-Allow-Origin','*'); return new RequestOptions({ headers: headers }); } }
和模块文件如下
import { CommonModule } from '@angular/common'; import { HTTP_INTERCEPTORS,HttpClient } from '@angular/common/http'; import { FormsModule } from '@angular/forms'; import { ModuleWithProviders,NgModule } from '@angular/core'; import { PlatformService } from '../../services/platform.service'; import { CachingInterceptor } from '../../services/caching-interceptor.service'; @NgModule({ imports: [CommonModule,FormsModule],declarations: [],exports: [],entryComponents: [EntryHereComponent] }) export class StructurModule { public static forRoot(): ModuleWithProviders { return { ngModule: StructurModule,providers: [PlatformService,{ provide: HTTP_INTERCEPTORS,useExisting: CachingInterceptor,multi: true },HttpClient] }; } }
我不明白,遗漏了什么,所以它给出了错误
No provider for HttpHandler.
如果我在模块文件的提供程序中添加HttpHandler,它会开始给出提供错误:HTTP_INTERCEPTORS,component.
HttpClient是在角度4.3中引入的,所以如果你想使用HttpClient,你需要从’@ angular / common / http’导入HttpClientModule.确保在BrowserModule之后导入HttpClientModule,如下所示.
official doc和
so answer将为您提供深入的信息.
import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ BrowserModule,HttpClientModule ],...