Angular HTTP Interceptor – 在多模块应用程序中显示微调器
发布时间:2020-12-17 17:36:57 所属栏目:安全 来源:网络整理
导读:我正在尝试显示ng4-loading-spinner微调器,用于对我的API进行的HTTP调用. 我的代码基于以下链接中的示例: https://angular.io/guide/http#intercepting-all-requests-or-responses Angular4: Using HttpClient’s interceptor to setup a spinner 我的Angul
我正在尝试显示ng4-loading-spinner微调器,用于对我的API进行的HTTP调用.
我的代码基于以下链接中的示例: > https://angular.io/guide/http#intercepting-all-requests-or-responses 我的Angular 5应用程序有多个多个模块. HTTP拦截器位于“服务”模块中. 我认为我有一个依赖注入问题,因为当我使用Chrome Dev Tools调试代码时,代码HTTP拦截器代码无法执行. API-interceptor.ts import 'rxjs/add/operator/do'; import 'rxjs/add/operator/catch' import { Observable } from 'rxjs/Observable'; import { Injectable } from '@angular/core'; import { HttpEvent,HttpInterceptor,HttpHandler,HttpRequest,HttpResponse } from '@angular/common/http'; import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner'; @Injectable() export class ApiInterceptor implements HttpInterceptor { private count: number = 0; constructor(private spinner: Ng4LoadingSpinnerService) { } intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> { this.count++; if (this.count == 1) this.spinner.show(); let handleObs: Observable<HttpEvent<any>> = next.handle(req); handleObs .catch((err: any) => { this.count--; return Observable.throw(err); }) .do(event => { if (event instanceof HttpResponse) { this.count--; if (this.count == 0) this.spinner.hide(); } }); return handleObs; } } api.service.ts import { Injectable,Inject } from '@angular/core'; import { Http,Response,Headers,RequestOptions } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import { TokenService } from './token.service'; @Injectable() export class ApiService { constructor( private http: Http,private session: TokenService,@Inject('BASE_URL') private baseUrl) { } get(entityRoute: string): Observable<Response> { let apiRoute = this.getApiRoute(entityRoute); let options = this.generateRequestOptions(); return this.http.get(apiRoute,options); } post<T>(entityRoute: string,entity: T): Observable<Response> { let apiRoute = this.getApiRoute(entityRoute); let options = this.generateRequestOptions(); return this.http.post(apiRoute,entity,options); } put<T>(entityRoute: string,options); } private getApiRoute(entityRoute: string): string { return `${this.baseUrl}api/${entityRoute}`; } private generateRequestOptions(): RequestOptions { let headersObj = null; let accessToken = this.session.getAccessToken(); if (accessToken) { headersObj = { 'Content-Type': 'application/json','Authorization': 'Bearer ' + accessToken }; } else { headersObj = { 'Content-Type': 'application/json' }; } let headers = new Headers(headersObj); return new RequestOptions({ headers: headers }); } } services.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpModule } from '@angular/http'; import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner'; import { ApiInterceptor,ApiService,TokenService } from './index'; @NgModule({ imports: [ CommonModule,HttpModule,Ng4LoadingSpinnerModule ],providers: [ ApiInterceptor,TokenService ] }) export class ServicesModule { } export * from './index'; app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner'; import { BootstrapModule } from './bootstrap/bootstrap.module'; import { ServicesModule,ApiInterceptor } from './services/services.module'; import { AppComponent } from './app-component'; @NgModule({ bootstrap: [ AppComponent ],imports: [ BrowserModule,Ng4LoadingSpinnerModule.forRoot(),BootstrapModule,ServicesModule ],providers: [ { provide: 'BASE_URL',useFactory: getBaseUrl },{ provide: HTTP_INTERCEPTORS,useClass: ApiInterceptor,multi: true,} ] }) export class AppModule { } export function getBaseUrl(): string { return document.getElementsByTagName('base')[0].href; } 解决方法
问题是ApiService使用来自@ angular / http的Http而不是来自@ angular / common / http的HttpClient.
所以ApiInterceptor没有任何可以拦截的东西. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |