Nest.js - 如何对HttpModule(axios)添加拦截器

由于工作需要,需要对所有的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中也存在生命周期,如图所示:

具体参考官网介绍

添加拦截器

由于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<LoggingConfig> {
  constructor(httpService: HttpService) {
    super(httpService)
  requestFulfilled(): AxiosFulfilledInterceptor<LoggingConfig> {
    return (config) => {
      config[LOGGING_CONFIG_KEY] = {
        startTime: Date.now(),
      return config
  // requestRejected(): AxiosRejectedInterceptor {}
  responseFulfilled(): AxiosFulfilledInterceptor<
    AxiosResponseCustomConfig<LoggingConfig>
    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],