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

Axiosはデフォルトのカスタム構成をカプセル化します
設定読み込みの優先度
インターセプター
リクエストを取得
投稿リクエスト
削除リクエスト
Putリクエスト: オブジェクトリソース全体を更新する
パッチリクエスト: オブジェクトのローカルリソースを更新します
同時リクエスト

axios と ajax の違いは何ですか?

axios のカプセル化をカスタマイズするにはどうすればいいですか?

要約する

axiosとは何ですか?

Axios は、ブラウザと node.js で使用できる promise ベースの HTTP ライブラリです。

特性：

ブラウザから XMLHttpRequests を実行する
node.js から http リクエストを送信する
Promise APIのサポート
リクエストとレスポンスの傍受
リクエストとレスポンスのデータを変換する
リクエストをキャンセル
JSONデータを自動的に変換する
XSRF 保護のクライアント側サポート

約束

axios は、ネイティブ ES6 Promise 実装に依存してサポートされます。環境が ES6 Promise をサポートしていない場合は、ポリフィルを使用できます。

Axios リクエストタイプ?

一連のノード環境をインストールします。

引用方法は3つあります。
npm install axios - まずノードにaxiosをインストールし、次にapiパッケージにaxiosを導入します
bower install axios --npm で bower をインストールし、bower に axios パッケージをインポートします。

バウアー:
Bower は、HTML、CSS、JavaScript、フォント、さらには画像ファイルを含むコンポーネントを管理できます。 Bower はコードなどを連結したり縮小したりはしません。必要なパッケージとその依存関係の正しいバージョンをインストールするだけです。
jsファイルをvueに直接導入する
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axiosはデフォルトのカスタム構成をカプセル化します

定数インスタンス = 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インスタンス
  リクエスト： {}
});

設定読み込みの優先度

高から低の順:

ステップ1: デフォルト値を設定する

リクエストに設定された構成項目

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

パート 2: グローバル Axios デフォルト

APIファイルで設定される設定項目

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

ステップ3: インスタンスのデフォルトをカスタマイズする

axiosインスタンスを作成するときに設定される構成項目

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) を返します。
  });

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

リクエストを取得

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

投稿リクエスト

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

});

削除リクエスト

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

});

Putリクエスト: オブジェクトリソース全体を更新する

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

});

パッチリクエスト: オブジェクトのローカルリソースを更新します

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

});

カプセル化後の別の書き方を示します。
axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

同時リクエスト

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) { // 対応するリクエストのレスポンス本文 // 両方のリクエストが完了しました }));

axios と ajax の違いは何ですか?

アクシオス:

node.js から http リクエストを送信する

Promise APIのサポート

CSRF 保護のクライアント側サポート

いくつかの同時リクエストインターフェースを提供します（重要、多くの操作に便利）

アヤックス:

3. JQueryプロジェクト全体が大きすぎる。Ajaxのみを使用する場合、JQuery全体を導入するのは無理がある（パーソナライズされたパッケージソリューションを採用するとCDNサービスが許可されない）

axios のカプセル化をカスタマイズするにはどうすればいいですか?

1. インターフェース要求のカプセル化、応答、インターセプション、認証、その他の基本構成ファイルindex.jsを確立する

静的リソースをインポートします。 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 をエクスポートします。

2. インターフェースリクエスト管理を容易にするために、キーと値の形式でインターフェースファイルを作成します。apiMap.js

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

3. インデックスファイルをvueエントリファイルに導入する

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);

Vue.js で Vuex をビルドします。

Vue が Vuex プラグインを登録しているかどうかを判断します。

vuexInit 関数を vue の beforeCreate ライフサイクルに組み込みます。

vueがインスタンス化されると、各vueインスタンスにstoreプロパティが追加され、vuexインスタンスはstoreプロパティにバインドされ、vuexインスタンスは

store プロパティに、vuex インスタンスを store プロパティにバインドします。

要約する

これで、axios リクエストカプセル化に基づく vue アプリケーションに関するこの記事は終了です。axios リクエストカプセル化に関するその他の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: