TypeScript Axios 共通化

AxiosはJavaScriptやTypeScriptでよく使用されるHTTPクライアントライブラリであり、プロジェクトでAPIとの通信を行う際に非常に便利です。しかし、プロジェクトが成長するにつれて、Axiosの呼び出しや設定が散らばり、メンテナンス性が低下する可能性があります。

この記事では、TypeScriptを使用してAxiosを効果的に共通化する方法に焦点を当てます。共通化することで、コードの重複を減らし、保守性を向上させます。

Axios インスタンスの作成

まず最初に、プロジェクトで共通のAxiosインスタンスを作成します。これにより、共通の設定やデフォルトのヘッダーを定義できます。

// axios-instance.ts
import axios, { AxiosInstance } from 'axios';

const commonAxios: AxiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
    // 他に必要な共通のヘッダーがあれば追加
  },
});

export default commonAxios;

共通のAPI呼び出し関数の作成

次に、共通のAPI呼び出し関数を作成します。これにより、APIエンドポイントごとに異なる設定やヘッダーを簡単に追加できます。

“`typescript
// api-calls.ts
import commonAxios from ‘./axios-instance’;

export const getSomeData = async (): Promise<any