angular—如何制作一个HTTP拦截器

原文链接：https://www.longkui.site/program/frontend/angular-http/5548/

HTTP拦截器在开发过程中十分常见。在构建项目时，最好就直接创建一个HTTP拦截器，否则遇到以下几种问题，再进行改动就会十分浪费时间。

需要给所有的请求修改请求地址。

需要给所有的请求参数设置新的请求报文首部。

需要监听所有请求的状态码。

1.创建项目
前面的一些文章中简单说过创建angular项目的过程，可以简单参考。

项目创建完毕后，我们打开app.module.ts，我们导入httpClient。

app.module.ts:

import { HttpClientModule } from ‘@angular/common/http’;

imports: [
HttpClientModule
],
然后我们创建HttpService.ts文件：

import { HttpClient } from “@angular/common/http”;
import { Injectable } from “@angular/core”;
import { from, Observable, of } from “rxjs”;
import {catchError,map,tap,retry} from ‘rxjs/operators’
import { resolve } from “url”;
@Injectable()
export class HttpService{
private baseUrl=‘https://jsonplaceholder.typicode.com’;
constructor( public http:HttpClient){}
private extractData(res:Response){
const body=res;
return body || {};
}
private handleError(operation =‘opertion’, result?:T){
return (error:any): Observable => {
console.error(error);
console.log(${operation} failed: ${error.message});
return of(result as T);
};
}
}
baseUrl是网络请求通用的地址，这样发生网络请求时就不需要重复写了。extractData这个方法是用来对请求参数进行处理的，在这个例子中，我们虽然不需要处理请求参数，但是我们还是把这部分预留出来了。 handleError用来截获异常情况。这几个方法不需要对外公布，所以使用private进行修饰。

2.加入请求方法
import { HttpClient } from “@angular/common/http”;
import { Injectable } from “@angular/core”;
import { Observable, of } from “rxjs”;
import {catchError,map,tap,retry} from ‘rxjs/operators’
@Injectable()
export class HttpService{
private baseUrl=‘https://jsonplaceholder.typicode.com’;
constructor( public http:HttpClient){}
//get方法
public get(url:string):Observable{
return this.http.get(this.baseUrl + url).pipe(
retry(2),
map(this.extractData),
tap( ()=> {}),
catchError(this.handleError(‘get’,[]))
);
}
//post方法
public post(url:string, data:any={}):Observable{
return this.http.post(this.baseUrl + url,data).pipe(
retry(2),
map(this.extractData),
tap( ()=> {}),
catchError(this.handleError(‘get’,[]))
);
}
private extractData(res:Response){
const body=res;
return body || {};
}
private handleError(operation =‘opertion’, result?:T){
return (error:any): Observable => {
console.error(error);
console.log(${operation} failed: ${error.message});
return of(result as T);
};
}
}
我们在GET和POST请求中都是将baseUrl拼接在前面，retry是网络请求失败时重试的次数，map中存放了我们的请求参数，这个网络请求最终会返回一个可观察对象Observable。

然后在app.module.ts中加入 HttpService的引用

import { HttpService } from ‘./http-service’;

@NgModule({
…
providers: [HttpService ],
…
})

3.测试
我们在app.componet.ts文件中加入下面的代码：

constructor(private http:HttpService){
this.http.get(‘/todos/1’).subscribe(res=>{
console.log(res)
})
}
然后就可以在控制台中看到下面返回的数据了

添加链接描述