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

記事作成日時: 2019/11/29 11:00

最終更新日時: 2019/11/29 11:00


はじめに

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を取得できます。

参考記事