axiosのシンプルなカプセル化と使用例コード

'axios' から axios をインポートします。
'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。
'../router' からルーターをインポートします。

process.env.NODE_ENV === '開発'の場合{
  axios.defaults.baseURL = 'api';
} そうでない場合 (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'https://xxxxxxxxx/index/';
}

//リクエストインターセプターは、通常のリクエストを送信するときとフォームデータを送信するときのリクエストヘッダーを区別します。axios.interceptors.request.use((config) => {
  config.headers['Content-Type'] = 'application/json';
  if (config.method === 'post') {
    //FormDataのリクエストヘッダー if (Object.prototype.toString.call(config.data) === '[object FormData]') {
      // リクエストインターセプター処理 config.headers['Content-Type'] = 'multipart/form-data';
    } そうでない場合 (Object.prototype.toString.call(config.data) === '[object String]') {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    }
  } それ以外 {
    config.headers['Content-Type'] = 'application/json';
  }
  設定を返します。
});

//レスポンスインターセプター axios.interceptors.response.use(
  (設定) => {
    値をconfig.dataとします。
    config.status === 200 の場合
      if (typeof value === 'string') {
        if (値 === 'タイムアウト') {
          ElementUI.MessageBox.confirm('操作を長時間行っていないか、操作する権限がありません。ログインページに移動して再度ログインしてください。', 'Prompt', {
            confirmButtonText: '確認'、
            タイプ: '警告'
          }).then(() => {
            router.push({ name: 'ログイン' });
          });
        }それ以外 {
          ElementUI.Message.info(値);
        }
      }
    }
    設定を返します。
  },
  (エラー) => {
    値をerr.response.statusTextとします。
    スイッチ (err.response.status) {
      ケース400:
        ElementUI.Message.error('構文形式が正しくないため、サーバーはこのリクエストを理解できません')
        壊す;
      ケース401:
      ケース403:
      ケース404:
      ケース405:
        ElementUI.Message.warning(値);
        壊す;
      デフォルト：
        ElementUI.Message.error('操作中にエラーが発生しました。この操作は無効です!' + value);
        壊す;
    }
    err.responseを返す
  }
);

非同期関数 axiosGet(url, params = {}) をエクスポートします。
  res = axios.get(url, { params: params }); を待機します。
  res.status === 200の場合{
    res.dataを返す
  }それ以外 {
    res.statusTextをスローする
  }
}

非同期関数 axiosPost(url, params = {}) をエクスポートします。
  res = axios.post(url, params); を待機します。
  res.status === 200の場合{
    res.dataを返す
  }それ以外 {
    res.statusTextをスローする
  }
}

'./axios' から { axiosGet, axiosPost } をインポートします。

エクスポートデフォルト{
  getLogin:(パラメータ = {}) => {
    axiosPost('/login', params) を返します
  },
  getUser:(パラメータ = {}) => {
    axiosGet('http://localhost:3000/user', パラメータ) を返します
  }
}

'@/server/api' から DbauditServer をインポートします。
//インターフェイスを呼び出すためにファイルにapi.jsを導入する

formData = 新しいFormData
formData.append('パスワード', this.formLabelAlign.password)
let res1 = await DbauditServer.getLogin(formData) //呼び出すだけで正常に動作します。let res2 = await DbauditServer.getUser()