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

70_10

2019/11/29

はじめに

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で扱う関数の引数にはtimestampやresponseTimeのフィールド変数はありません。
このまま実行しようとすると型定義に反していてエラーが発生します。

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

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

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

参考記事

axios でレスポンスタイムを計測する｜ masio ｜ note