axiosでレスポンスタイムを計測する (TypeScript編)

Icon

70_10

はじめに

axios で、リクエストからレスポンスまでの時間を計測する必要がありました。
調べると方法は出てくるが、TypeScript でやってる記事は見つからなかっのでまとめます。

AxiosInstance.interceptorsでレスポンスタイムを追加する

この記事に書かれているように、axios インスタンスにあるinterceptorsでレスポンスタイムを追加します。

axios.js
import axios from 'axios'
const instance = axios.create()

instance.interceptors.request.use(config => {
  config.timestamp = Date.now()
  return config
})

instance.interceptors.response.use(response => {
  response.responseTime = Date.now() - response.config.ts
  return response
})

export default instance

TypeScript のために型定義を拡張する

interceptors.request.use, interceptors.response.useで扱う関数の引数にはtimestampresponseTimeのフィールド変数はありません。
このまま実行しようとすると型定義に反していてエラーが発生します。

これを回避するには、AxiosRequestConfig, AxiosResponseの型定義を拡張します。

declare module "axios" {
  export interface AxiosRequestConfig {
    timestamp?: number;
  }
  export interface AxiosResponse<T = any> {
    responseTime?: number;
  }
}

これで、レスポンス情報からresponseTimeを取得できます。

参考記事