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

原文链接：angular—如何制作一个HTTP拦截器 – 每天进步一点点

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<T>(operation ='opertion', result?:T){
return (error:any): Observable<T> => {
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<any>{
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<any>{
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<T>(operation ='opertion', result?:T){
return (error:any): Observable<T> => {
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)
    })
  }

然后就可以在控制台中看到下面返回的数据了

posted on 2024-11-07 14:58  longkui  阅读(1)  评论(0)  编辑  收藏  举报

导航