由于工作需要，需要对所有的Http请求添加统一的拦截器。查了不少文档，绕了不少弯路，也get到不少东西，特此记录下。
搜了很多资料，大多数答案如下:
export class AppModule implements OnModuleInit {
constructor(private httpService: HttpService) { }
public onModuleInit() {
this.httpService.axiosRef.interceptors.request.use((req) => {
console.log('request', req);
return req;
})
this.httpService.axiosRef.interceptors.response.use((response) => {
console.log('response', response);
return response;
});
}
}
先不管这种解决方案是否正确，我们先来看下这部分代码里面的知识点:
生命周期
同react一样，nest.js中也存在生命周期，如图所示:
image.png
简单介绍下
| 钩子方法 | 触发钩子方法调用的生命周期事件 |
|---|---|
| OnModuleInit | 初始化主模块后调用 |
| OnApplicationBootstrap | 在应用程序完全启动并引导后调用 |
| OnModuleDestroy | 在Nest销毁主模块(app.close()方法之前进行清理) |
| beforeApplicationShutdown | 在调用OnModuleDestroy()完成后(promise或者reject)触发 |
| OnApplicationShutdown | 响应系统信号(当应用程序关闭时，例如SIGTERM) |
具体参考官网介绍
添加拦截器
由于Nest.js的HttpModule模块底层使用的是axios，所以对HttpModule添加拦截器，实际就是对axios添加拦截器。看下面代码:
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
//config是axios请求的参数
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
// response 是请求回来的数据
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
}
)
所以在Nest.js中对axios添加就有了如下代码:
this.httpService.axiosRef.interceptors.request.use((req) => {
console.log('request', req);
return req;
})
this.httpService.axiosRef.interceptors.response.use((response) => {
console.log('response', response);
return response;
});
结合上面两个知识点，我们就能看懂最初的那段代码了。它就是想在AppModule启动的时候，统一对httpService添加拦截器。
想法是好的，现实却很残酷，我试了很久都不行，于是继续搜，直接在一个issue中找到了一样的代码以及Nest开发人员的回复
Issue及回答
按照官方回答，将第一段代码迁入到单独的Module下面，果然就能拦截到请求。
可是这样实在太麻烦，每次都要写一坨代码。
于是就想到注入的方式，搜了下github，果然有人实现了。nest-axios-interceptor
下来我们基于它，来写个拦截器，实现记录axios请求响应时间的功能。
import { HttpService, Injectable } from '@nestjs/common'
import type { AxiosRequestConfig } from 'axios'
import {
AxiosInterceptor,
AxiosFulfilledInterceptor,
AxiosRejectedInterceptor,
AxiosResponseCustomConfig,
} from '@narando/nest-axios-interceptor'
// logging.axios-interceptor.ts
const LOGGING_CONFIG_KEY = Symbol('kLoggingAxiosInterceptor')
// Merging our custom properties with the base config
interface LoggingConfig extends AxiosRequestConfig {
[LOGGING_CONFIG_KEY]: {
startTime: number
}
}
@Injectable()
export class LoggingAxiosInterceptor extends AxiosInterceptor {
constructor(httpService: HttpService) {
super(httpService)
}
requestFulfilled(): AxiosFulfilledInterceptor {
return (config) => {
config[LOGGING_CONFIG_KEY] = {
startTime: Date.now(),
}
return config
}
}
// requestRejected(): AxiosRejectedInterceptor {}
responseFulfilled(): AxiosFulfilledInterceptor<
AxiosResponseCustomConfig
> {
return (res) => {
const startTime = res.config[LOGGING_CONFIG_KEY].startTime
const endTime = Date.now()
const duration = endTime - startTime
const log = `axios调用接口路由:${res.config.url};请求时间: ${duration}ms`
console.log(log)
return res
}
}
}
最后就是如何注入拦截器了,把它放进module的providers即可
import { Module, HttpModule } from '@nestjs/common'
import { ExampleController } from '../controller/index.controller'
import { ExampleService } from '../service/index.service'
import { LoggingAxiosInterceptor } from 'xxxx/axios.interceptor'
/**
* 示例模块
*/
@Module({
imports: [HttpModule.register({})],
controllers: [ExampleController],
providers: [LoggingAxiosInterceptor, ExampleService],
})
export class ExampleModule {}