axios リクエストのカプセル化に基づく Vue アプリケーションのサンプルコード

定数インスタンス = axios.create({
{
   // `url` はリクエストに使用するサーバー URL です
  URL: '/ユーザー',

  // `method` はリクエストメソッドを作成するときに使用されるメソッドです: 'get', // デフォルト

  // `url` が絶対 URL でない限り、`baseURL` は `url` の先頭に自動的に追加されます。
  // `baseURL` を設定することで、axios インスタンスのメソッドに相対 URL を渡すのが便利です。
  ベースURL: 'https://some-domain.com/api/',

  // `transformRequest` は、サーバーに送信する前にリクエスト データを変更することを可能にします // 'PUT'、'POST'、および 'PATCH' リクエスト メソッドでのみ使用できます // 次の配列の関数は、文字列、ArrayBuffer、または Stream を返す必要があります
  transformRequest: [関数 (データ、ヘッダー) {
    //データに対して任意の変換を実行します。 return data;
  }],

  // `transformResponse` は、レスポンスデータを then/catch に渡す前に変更することを可能にします transformResponse: [function (data) {
    //データに対して任意の変換を実行します。 return data;
  }],

  // `headers` は送信されるカスタムリクエストヘッダーです。headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` はリクエストとともに送信される URL パラメータです // プレーン オブジェクトまたは URLSearchParams オブジェクトである必要があります params: {
    ID: 12345
  },

   // `paramsSerializer` は `params` をシリアル化する関数です // (例: https://www.npmjs.com/package/qs、http://api.jquery.com/jquery.param/)
  パラメータシリアライザー: 関数(パラメータ) {
    Qs.stringify(params, {arrayFormat: 'brackets'}) を返します
  },

  // `data` はリクエスト本文として送信されるデータです // リクエストメソッド 'PUT'、'POST'、および 'PATCH' にのみ適用されます
  // `transformRequest` が設定されていない場合は、次のいずれかのタイプである必要があります。
  // - 文字列、プレーンオブジェクト、ArrayBuffer、ArrayBufferView、URLSearchParams
  // - ブラウザ固有: FormData、File、Blob
  // - ノード固有: ストリーム
  データ： {
    名: 'フレッド'
  },

  // `timeout` はリクエストがタイムアウトするまでのミリ秒数を指定します (0 はタイムアウトなしを意味します)
  // リクエストが `timeout` より長くかかる場合、リクエストは中断されます timeout: 1000,

   // `withCredentials` は、クロスドメインリクエストに資格情報が必要かどうかを示します withCredentials: false, // デフォルト

  // `adapter` を使用すると、カスタム リクエスト処理が可能になり、テストが容易になります // 有効なレスポンスを含む promise を返します ([レスポンス ドキュメント](#response-api) を参照)。
  アダプタ: 関数 (config) {
    /* ... */
  },

 // `auth` は HTTP 基本認証を使用する必要があることを示し、資格情報を提供します // これにより `Authorization` ヘッダーが設定され、`headers` を使用して設定された既存のカスタム `Authorization` ヘッダーが上書きされます auth: {
    ユーザー名: 'janedoe',
    パスワード: 's00pers3cret'
  },

   // `responseType` はサーバー応答のデータ型を示します。'arraybuffer'、'blob'、'document'、'json'、'text'、'stream' のいずれかになります。
  responseType: 'json', // デフォルト

  // `responseEncoding` はレスポンスのデコードに使用するエンコーディングを示します
  // 注: `responseType` が 'stream' またはクライアント側リクエストの場合は無視されます
  responseEncoding: 'utf8', // デフォルト

   // `xsrfCookieName` は、xsrf トークンの値として使用される Cookie の名前です。xsrfCookieName: 'XSRF-TOKEN'、// デフォルト

  // `xsrfHeaderName` は、xsrf トークン値を運ぶ HTTP ヘッダーの名前です
  xsrfHeaderName: 'X-XSRF-TOKEN', // デフォルト

   // `onUploadProgress` はアップロードの進行状況イベントを処理できます onUploadProgress: function (progressEvent) {
    // ネイティブの進行状況イベントで好きなことを行う
  },

  // `onDownloadProgress` はダウンロードの進行状況イベントを処理できます onDownloadProgress: function (progressEvent) {
    // ネイティブ進行イベントの処理},

   // `maxContentLength` はレスポンスコンテンツの最大サイズを定義します maxContentLength: 2000,

  // `validateStatus` は、指定された HTTP 応答ステータス コードに対して promise を解決するか拒否するかを定義します。 `validateStatus` が `true` を返す場合（または `null` または `undefined` に設定されている場合）、Promise は解決されます。それ以外の場合、Promise は拒否されます。
  検証ステータス: 関数 (ステータス) {
    ステータス >= 200 && ステータス < 300; を返します // デフォルト
  },

  // `maxRedirects` は node.js でフォローするリダイレクトの最大数を定義します // 0 に設定すると、リダイレクトはフォローされません maxRedirects: 5, // デフォルト

  // `socketPath` は、node.js で使用される UNIX ソケットを定義します。
  // たとえば、docker デーモンにリクエストを送信するには '/var/run/docker.sock' を使用します。
  // `socketPath` または `proxy` のいずれかのみを指定できます。
  // 両方が指定されている場合は、`socketPath` が使用されます。
  socketPath: null, // デフォルト

  // `httpAgent` と `httpsAgent` は、それぞれ http と https を実行するときに使用するカスタムエージェントを定義するために node.js で使用されます。次のような構成オプションを許可します:
  // `keepAlive` はデフォルトでは有効になっていません httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: 新しい https.Agent({keepAlive: true })、

  // 'proxy' はプロキシ サーバーのホスト名とポートを定義します // `auth` は、プロキシに接続して資格情報を提供するのに HTTP 基本認証を使用する必要があることを示します // これにより、`Proxy-Authorization` ヘッダーが設定され、`header` を使用して設定された既存のカスタム `Proxy-Authorization` ヘッダーが上書きされます。
  プロキシ： {
    ホスト: '127.0.0.1',
    ポート: 9000、
    認証:
      ユーザー名: 'mikeymike'、
      パスワード: 'rapunz3l'
    }
  },

  // `cancelToken` はリクエストをキャンセルするために使用されるキャンセルトークンを指定します
  // (詳細については、以下のキャンセルセクションを参照してください)
  cancelToken: 新しいCancelToken(関数(キャンセル) {
  })
}
}).then(関数(応答){
// `data` サーバーから提供された応答データ: {},

  // `status` サーバーからのHTTPステータスコード 応答ステータス: 200、

  // `statusText` サーバー応答からの HTTP ステータス情報 statusText: 'OK',

  // `headers` サーバー応答ヘッダー: {},

   // `config` はリクエストに提供される構成情報です config: {},
 // 'リクエスト'
  // `request` はこのレスポンスを生成したリクエストです
  // これは node.js 内の最後の ClientRequest インスタンスです (リダイレクト内)
  // そしてブラウザのXMLHttpRequestインスタンス
  リクエスト： {}
});

インスタンス.get('/longRequest', {
 タイムアウト: 5000
});

インスタンスのデフォルトタイムアウト = 2500;

var インスタンス = axios.create();

// リクエストインターセプターを追加 axios.interceptors.request.use(function (config) {
    // リクエストを送信する前に何かを実行します return config;
  }, 関数 (エラー) {
    // リクエストエラーに対して何かを実行します。 return Promise.reject(error);
  });

// レスポンスインターセプターを追加する axios.interceptors.response.use(function (response) {
    // 応答データを使用して何かを実行します。 return response;
  }, 関数 (エラー) {
    スイッチ (err.response.status) {
      ケース400:
        err.message = 'エラーリクエスト';
        壊す;
      ケース401:
        err.message = '権限がありません。もう一度ログインしてください';
        壊す;
      ケース403:
        err.message = 'アクセスが拒否されました';
        壊す;
      ケース404:
        err.message = 'リクエストエラー、リソースが見つかりませんでした';
        壊す;
      ケース405:
        err.message = 'リクエストメソッドは許可されていません';
        壊す;
      ケース408:
        err.message = 'リクエストのタイムアウト';
        壊す;
       ケース415:
        err.message = 'サーバーはリクエストに添付されたメディア形式を処理できません';
        壊す;
      ケース500:
        err.message = 'サーバーエラー';
        壊す;
      ケース501:
        err.message = 'ネットワークが実装されていません';
        壊す;
      ケース502:
        err.message = 'ネットワークエラー';
        壊す;
      ケース503:
        err.message = 'サービスは利用できません';
        壊す;
      ケース504:
        err.message = 'ネットワークタイムアウト';
        壊す;
      ケース505:
        err.message = 'http バージョンはこのリクエストをサポートしていません';
        壊す;
      デフォルト：
        err.message = `接続エラー ${err.response.status}`;
    }
  } それ以外 {
    err.message = 'サーバーへの接続に失敗しました';
  }
  Promise.resolve(err.response) を返します。
  });

axios.get({
	メソッド:'get',
	url:'xxxx',
	reponseType:'', //対応するタイプ parems:{//入力パラメータ }
}).then(関数(応答){
	....
})

アクシオス({
  メソッド: 'post'、
  URL: '/user/12345',
  データ： {
    名: 'フレッド',
    姓: 'フリントストーン'
  }
}).then(関数(res){

});

アクシオス({
  メソッド: '削除'、
  URL: '/user/12345',
 //パラメータ1: リクエストパラメータの末尾にマウント: {
 }
 //パラメータ2: リクエスト本文データにマウント{
}
}).then(関数(res){

});

アクシオス({
  メソッド: 'put'、
  URL: '/user/12345',
 データ{
}
}).then(関数(res){

});

アクシオス({
  メソッド: 'パッチ'、
  URL: '/user/12345',
 データ{
}
}).then(関数(res){

});

axios.all(反復可能)
axios.spread(コールバック)
関数 getUserAccount() {
axios.get('/user/12345') を返します。
}

関数 getUserPermissions() {
  axios.get('/user/12345/permissions') を返します。
}
//リクエスト配列 axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) { // 対応するリクエストのレスポンス本文 // 両方のリクエストが完了しました }));

静的リソースをインポートします。 import axios from 'axios';
 'qs' から qs をインポートします。
'./apiMap' から apiMap をインポートします。

グローバルデフォルトパラメータ axios.defaults.withCredentials = false を設定します。
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';

デフォルトのリクエストパラメータを設定する const instance = axios.create({
    ベースURL: process.env.API_ROOT、
    タイムアウト: 15 * 1000、
    認証:
    	...
    },
    ヘッダー: {
      'コンテンツタイプ': 'application/json;charset=utf-8',
      'X-リクエスト': 'XMLHttpRequest',
    },
  },
);
リクエストインターセプトを設定します:
インスタンス.インターセプター.リクエスト.使用(関数(config) {
...
})
対応する傍受を設定します。
// レスポンスインターセプターは例外処理instance.interceptors.response.use(response =>
   応答
、（エラー）=> {
  if (err && err.response) {
    スイッチ (err.response.status) {
      ケース400:
        err.message = 'エラーリクエスト';
        壊す;
      ケース401:
        err.message = '権限がありません。もう一度ログインしてください';
        壊す;
      ケース403:
        err.message = 'アクセスが拒否されました';
        壊す;
      ケース404:
        err.message = 'リクエストエラー、リソースが見つかりませんでした';
        壊す;
      ケース405:
        err.message = 'リクエストメソッドは許可されていません';
        壊す;
      ケース408:
        err.message = 'リクエストのタイムアウト';
        壊す;
       ケース415:
        err.message = 'サーバーはリクエストに添付されたメディア形式を処理できません';
        壊す;
      ケース500:
        err.message = 'サーバーエラー';
        壊す;
      ケース501:
        err.message = 'ネットワークが実装されていません';
        壊す;
      ケース502:
        err.message = 'ネットワークエラー';
        壊す;
      ケース503:
        err.message = 'サービスは利用できません';
        壊す;
      ケース504:
        err.message = 'ネットワークタイムアウト';
        壊す;
      ケース505:
        err.message = 'http バージョンはこのリクエストをサポートしていません';
        壊す;
      デフォルト：
        err.message = `接続エラー ${err.response.status}`;
    }
  } それ以外 {
    err.message = 'サーバーへの接続に失敗しました';
  }
  Promise.resolve(err.response) を返します。
});
カプセル化インターフェース要求:
api={ を設定します
	/**
	
	* getメソッドのカプセル化	
	* @param URL
	
	* @param パラメータ
	
	* @returns {Promise}
	
	*/
	
	取得 (URL、パラメータ = {}) {
	  新しい Promise を返します ((resolve, reject) => {
		  インスタンス.get(apiMap[url],params).then(res => {
	      解決(res.data)
	    }).catch(エラー => {
	      拒否(エラー)
	    })
	  })
	},
	
	/**
	
	* 役職
	
	* @param URL
	
	* @param パラメータ
	
	* @returns {Promise}
	
	*/
	
	投稿 (url, パラメータ = {}) {
	  新しい Promise を返します ((resolve, reject) => {
	    インスタンス.post(apiMap[url], パラメータ)
	      .then(res => {
	        解決(res.data)
	      }, エラー => {
	        拒否(エラー)
	      })
	  })
	},
	
	/**
	
	* メソッドのカプセル化を削除する	
	* @param URL
	
	* @param パラメータ
	
	* @returns {Promise}
	
	*/
	
	削除 (url, パラメータ = {}) {
	  新しい Promise を返します ((resolve, reject) => {
	    インスタンスを削除します(apiMap[url]、params)。その後(res => {
	      解決(res.data)
	    }).catch(エラー => {
	      拒否(エラー)
	    })
	  })
	},
	
	/**
	
	* putメソッドのカプセル化	
	* @param URL
	
	* @param パラメータ
	
	* @returns {Promise}
	
	*/
	
	（URL、パラメータ = {}）を配置します{
	  新しい Promise を返します ((resolve, reject) => {
	    インスタンス.put(apiMap[url], params).then(res => {
	      解決(res.data)
	    }).catch(エラー => {
	      拒否(エラー)
	    })
	  })
	},
	
	/**
	
	* パッチメソッドのカプセル化	
	* @param URL
	
	* @param パラメータ
	
	* @returns {Promise}
	
	*/
	
	パッチ (url, パラメータ = {}) {
	  新しい Promise を返します ((resolve, reject) => {
	    インスタンス.patch(apiMap[url], params).then(res => {
	      解決(res.data)
	    }).catch(エラー => {
	      拒否(エラー)
	    })
	  })
	}
}

デフォルト API をエクスポートします。

エクスポートデフォルト{
  // テーマリストキー: 'path'
};

Vue リソースをインポートするimport Vue from 'vue'
viewui プラグインをインポートします。import ViewUI from 'view-design';
viewuicss ファイルをインポートします。import 'view-design/dist/styles/iview.css';
ファイルのインポート|デフォルトではファイルサフィックスは必要ありませんimport Api from '/index';
グローバル バインディング | $ はインスタンス プロパティのスコープを設定します Vue.prototype.$api = Api;

設定ファイル index.js を作成します。
'vue' から Vue をインポートします。
'vuex' から Vuex をインポートします。
'./state' から State をインポートします。
Vue.js で Vuex をビルドします。
Vuex のインスタンスを新規に作成します。
デフォルトストアをエクスポートします。
グローバルパラメータの詳細ファイルstate.jsを作成する
エクスポートデフォルト{
	state: { //グローバルパラメータをここに記述する test: 0
	},
	変異:{ //値の設定 test(state,value)=>state.test=value;
	},
	ゲッター:{// 戻り値 test: state =>state.test;
	}
};
呼び出し方法:
var data = this.$store.getter.test;
var data = this.$store.commit('test', data);