プロジェクトにaxiosをカプセル化する実際のプロセス

axios.get('http://localhost:10086/user?ID=12345')
  .then(応答 => {
    // 成功後の操作...
  })
  .catch(エラー => {
    // 失敗後の操作...
  });

定数インスタンス = axios.create({
  ベースURL: 'https://api.example.com'
});

アクシオス({   
メソッド:'get',   
url:'http://bit.ly/2mTM3nY',   
レスポンスタイプ: 'stream' }).then(function(response) { response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) });

'axios' から axios をインポートします

エクスポート const request = createAxiosInstance()

関数createAxiosInstance() {
  定数インスタンス = axios.create({
    ベースURL: process.env.REACT_APP_BASE_URL、
    タイムアウト: 5000、
    ヘッダー: {
      // 統合リクエストヘッダーポストを定義できます: {
        'コンテンツタイプ': 'application/json'
      }
      ...
    }
  })
  インスタンスを返す
}

  // リクエストインターセプターを追加する（リクエストを送信する前に何かを行う）
  インスタンス.インターセプター.リクエスト.使用((config) => {
      //読み込みエフェクトを開く関数を追加できます。loading.open()  
      //トークンが存在する場合は、それをリクエスト ヘッダー トークンに追加します && (config.headers.Authorization = token)
     // リクエストパラメータ内の null undefined '' 関数をフィルター cleanObject()
      設定を返す
  })

 // レスポンスインターセプターを追加する（レスポンスデータで何かを行う）
  インスタンス.インターセプター.レスポンス.use((レスポンス) => {
   //読み込みエフェクトを閉じる関数を追加できます。loading.close()  
      //返された結果データを分解する const res = response.data
      //カスタムコードを判断し、成功したデータを返します const validateStatus = /^(2|3)\d{2}$/ //2または3で始まるコードは成功したリクエストとみなされます if (validateStatus.test(res.code)) {
        return res // 必要なデータを直接返す
      }
      //失敗したコードを判断し、プロンプトなどを表示します。if (res.code === 401) {
        メッセージ.エラー(res.msg)
      } それ以外 {
        メッセージ.警告(res.msg)
      }
      Promise.reject(res) を返す
      },
      (エラー) => {
      読み込み中.閉じる() 
      エラー応答ステータスが401の場合
        message.error('トークンの有効期限が切れています。もう一度ログインしてください!')
        ストレージトークンを削除します。
        タイムアウトを設定する(() => {
          window.location.href = '/ログイン'
        }, 2000)
      } それ以外 {
        （！window.navigator.onLine）の場合{
          message.warning('ネットワーク異常です。ネットワークが正常に接続されているか確認してください')
        } そうでない場合 (error.code === 'ECONNABORTED') {
          message.warning('リクエストタイムアウト')
        } それ以外 {
          message.warning('サーバー異常です。管理者に連絡してください')
        }
      }
      return Promise.reject(error) // 特定のページにエラーを返す}
      ）

'../axios' から { request } をインポートします

// ユーザー情報を取得するエクスポート関数 getUserInfo (userId) {
  request.get(`/sys/user/info/${userId}`) を返します
}

'axios' から axios をインポートします

エクスポート const request = createAxiosInstance()

関数createAxiosInstance() {
  定数インスタンス = axios.create({
    ベースURL: process.env.REACT_APP_BASE_URL、
    タイムアウト: 5000、
    ヘッダー: {
      // 統合リクエストヘッダーポストを定義できます: {
        'コンテンツタイプ': 'application/json'
      }
      ...
    }
  })
   // リクエストインターセプターを追加する（リクエストを送信する前に何かを行う）
  インスタンス.インターセプター.リクエスト.使用((config) => {
      //読み込みエフェクトを開く関数を追加できます。loading.open()  
      //トークンが存在する場合は、それをリクエスト ヘッダー トークンに追加します && (config.headers.Authorization = token)
     // リクエストパラメータ内の null undefined '' 関数をフィルター cleanObject()
      設定を返す
  })
  // レスポンスインターセプターを追加する（レスポンスデータで何かを行う）
  インスタンス.インターセプター.レスポンス.use((レスポンス) => {
   //読み込みエフェクトを閉じる関数を追加できます。loading.close()  
      //返された結果データを分解する const res = response.data
      //カスタムコードを判断し、成功したデータを返します const validateStatus = /^(2|3)\d{2}$/ //2または3で始まるコードは成功したリクエストとみなされます if (validateStatus.test(res.code)) {
        戻り値
      }
      //失敗したコードを判断し、プロンプトなどを表示します。if (res.code === 401) {
        メッセージ.エラー(res.msg)
      } それ以外 {
        メッセージ.警告(res.msg)
      }
      Promise.reject(res) を返す
      },
      (エラー) => {
      loading.close() //読み込みエフェクトを閉じる関数を追加できます if (error.response.status === 401) {
        message.error('トークンの有効期限が切れています。もう一度ログインしてください!')
        ストレージトークンを削除します。
        タイムアウトを設定する(() => {
          window.location.href = '/ログイン'
        }, 2000)
      } それ以外 {
        （！window.navigator.onLine）の場合{
          message.warning('ネットワーク異常です。ネットワークが正常に接続されているか確認してください')
        } そうでない場合 (error.code === 'ECONNABORTED') {
          message.warning('リクエストタイムアウト')
        } それ以外 {
          message.warning('サーバー異常です。管理者に連絡してください')
        }
      }
      return Promise.reject(error) // 特定のページにエラーを返す}
      ）
  
  インスタンスを返す
}