axiosをカプセル化する方法は何ですか？

axiosをラップする方法は以下の手順に従うことができます：

1. axiosのインスタンスを作成する：axios.create()メソッドを使用してaxiosのインスタンスを作成し、baseURLを設定したり、リクエストヘッダーを設定したりなど、いくつかのグローバル設定を行います。
2. 必要に応じて、GETやPOSTなどのさまざまなリクエストメソッドをカプセル化するためのラッパー関数を作成します。これらの関数では、axiosインスタンスのメソッドを呼び出してリクエストを送信し、リクエストヘッダーの設定やレスポンスの処理などを行うことができます。
3. 封装関数をexportして他の場所でインポートして使用できるようにする。

以下はGETリクエストを行う例のコードです。

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置请求的baseURL
  timeout: 5000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json', // 设置请求头的Content-Type
  },
});

// 封装GET请求方法
export function get(url, params) {
  return new Promise((resolve, reject) => {
    instance
      .get(url, { params })
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

他の場所では、importを使用してget関数をインポートし、その関数を呼び出してGETリクエストを送信できます。

import { get } from './api';

get('/user', { id: 1 })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

同様の方法により、POSTやPUTなど他の種類のリクエストメソッドをカプセル化することもできます。