Vue3アプリケーションでAxiosインターセプターを活用し、再利用可能なrequestモジュールを作成する方法を説明します。

まず、新しいファイルを「httpService.js」として作成し、Axiosをインポートします。

import axios from 'axios';

次に、カスタム設定を持つAxiosインスタンスを作成し、それを変数clientとして保存します。ここで、タイムアウトやベースURLなどの基本設定を指定します。

const client = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 10000 // タイムアウトを10秒に設定
});

続けて、リクエストおよびレスポンスのインターセプターを追加します。これにより、すべてのリクエストやレスポンスに対して共通処理を実行できます。

// リクエストインターセプター
client.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    config.headers['User-Name'] = localStorage.getItem('user_name') || '';
    return config;
  },
  (error) => Promise.reject(error)
);

// レスポンスインターセプター
client.interceptors.response.use(
  (response) => {
    const data = response.data;
    if (data.code !== 200) {
      throw new Error(data.message || 'サーバーからの応答が異常です');
    }
    return data.result;
  },
  (error) => {
    console.error('APIエラー:', error);
    return Promise.reject(error);
  }
);

最後に、このclientインスタンスをデフォルトでエクスポートします。

export default client;

これで、他のコンポーネント内で簡単にこのモジュールを使うことができます。たとえば、以下のようにGETリクエストを送信できます。

import http from './httpService';

http.get('/items')
  .then((result) => {
    console.log('アイテム一覧:', result);
  })
  .catch((err) => {
    console.error('リクエスト失敗:', err.message);
  });

さらに、上記の例ではlocalStorageからトークンとユーザー名を取得し、それらをリクエストヘッダーに追加しています。また、レスポンスデータ内のステータスコードをチェックし、問題があればエラーメッセージをログ出力します。