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中也存在生命周期，如图所示:

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<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],
  providers: [LoggingAxiosInterceptor, ExampleService],
})
export class ExampleModule {}