Vue で Axios カプセル化を使用するための完全なチュートリアル

	npm インストール axios -S
	またはnpm i axios -S

	'axios' から axios をインポートします
	Vue.prototype.$axios = axios //Vueのプロトタイプにaxiosをバインドする

	モジュール.エクスポート = {
	 パブリックパス: './',
	 //クロスドメインリクエストを構成する devServer: {
	  open: true, //ブラウザを自動的に開くかどうか https: false, //httpsを有効にするかどうか
	  hotOnly: 偽、
	  proxy: { // クロスドメインを構成する '/api': {
	    target: 'http://********', //リクエストインターフェースドメイン名 ws: true,
	    安全: 偽、
	    changOrigin: true, // パスの横断を許可するかどうかRewrite: {
	     '^/api': ''
	    }
	   }
	  },
	  以前: app => { }
	 }
	}

'axios' から axios をインポートします
//ここでは要素の読み込みを参照します。全画面読み込み。import { Loading } from "element-ui";

constサービス = axios.create({
 ベースURL: '/',
 timeout: 30000 // リクエストのタイムアウトを設定する})
読み込み = "";
// リクエストインターセプター service.interceptors.request.use(
 (設定) => {
  // リクエストが送信される前に何らかの処理を行う if (!(config.headers['Content-Type'])) {
   読み込み = Loading.service({
    ロック: 真、
    テキスト: "読み込み中...",
    スピナー: "el-icon-loading",
    背景: "rgba(255,255,255,0.7)",
    カスタムクラス: "リクエスト読み込み",
   });
   config.method == 'post'の場合{
    config.headers['コンテンツタイプ'] =
     'アプリケーション/json;文字セット=UTF-8'
    for (config.data内のvarキー) {
     if (config.data[キー] === '') {
      config.data[キー]を削除する
     }
    }
    config.data = JSON.stringify(config.data)
   } それ以外 {
    config.headers['コンテンツタイプ'] =
     'application/x-www-form-urlencoded;charset=UTF-8'
    config.data = JSON.stringify(config.data)
   }
  }
  const トークン = "トークン"
  // 各リクエストにトークンを持たせます。['X-Token'] はカスタムキーです。実際の状況に応じて変更してください。if (token) {
   config.headers['Authorization'] = トークン
  }
  設定を返す
 },
 (エラー) => {
  読み込み中。閉じる();
  // 送信失敗 console.log(error)
  Promise.reject(error) を返します。
 }
）

// レスポンスインターセプター service.interceptors.response.use(
 （応答） => {

  読み込み中。閉じる();
  // dataAxios は axios によって返されるデータです
  // ロードインスタンスを閉じる();
  定数 dataAxios = レスポンス.data
  // このステータスコードは、バックエンドと合意したデータAxiosの戻り値です
 },
 (エラー) => {
  Promise.reject(error) を返します。
 }
）

	デフォルト サービスをエクスポートする

 // パッケージ化されたaxiosをインポートする
 // ps: カプセル化されていない場合は、axios を "./api" からインポートできます。
	// /api はクロスドメインを構成するためのパス変数です。let reportUpload= '/api/report/upload'
  エクスポートconstアップロード= () => {
   axios.get( reportUpload ) を返します。
  }

// カプセル化されたインターフェースを導入します import { Upload} from "@/api/http.js"; 

// async Upload() を使用して呼び出す {
  let { 結果 } = getlist() を待機します。
  	console.log(結果)
 },