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

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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • axiosリクエストをvueでカプセル化する方法
  • Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)
  • Vue3+TypeScriptはaxiosをカプセル化し、リクエスト呼び出しを実装します
  • Vue+axiosはリクエストをカプセル化してフロントエンドとバックエンドを分離します
  • Vue が Axios リクエストとインターセプターをカプセル化する手順
  • Axios を使用して Vue プロジェクトで http リクエストをカプセル化する方法
  • Vue axios 繰り返しクリックで最後のリクエストをキャンセルするカプセル化メソッド
  • Vue プロジェクトでの axios のカプセル化リクエスト

<<:  Windows Server 2016 標準キー アクティベーション キー シリアル番号

>>:  一般的なMySQLコマンドの概要

推薦する

JavaScript データのフラット化の詳細な説明

目次フラット化とは何か再帰トストリング減らすアンダーコア_.平坦化_。連合_。違い要約するフラット化...

HTMLメタの大きな役割

メタ属性には、name と http-equiv の 2 つがあります。 name 属性は主に、We...

mysql 行列変換サンプルコード

1. 需要3 つのテーブルがあります。一定期間にわたるさまざまな抗生物質感受性の結果、つまり rep...

Javascript配列の重複排除のいくつかの方法の詳細な説明

目次アレイ重複排除1 2層forループ(バブルソートの2層ループ記述に類似) 2 ループとインデック...

Zabbix と bat スクリプトを組み合わせて複数のアプリケーションの状態を監視する方法

シナリオシミュレーション:国内企業の中には、重要な業務をサポートするために特定のウィンドウ プログラ...

Nuxt.jsプロジェクトのDockerデプロイメントの実装

Docker 公式ドキュメント: https://docs.docker.com/ Docker は...

mysql 8.0.15 winx64 解凍バージョン グラフィック インストール チュートリアル

システムをインストールした後、毎回いくつかのソフトウェアを再インストールする必要があります。ソフトウ...

MySQL の指定文字によるマージと分割の例のチュートリアル

序文指定した文字による結合または分割は一般的なシナリオです。MySQL では結合の記述は比較的簡単で...

Docker で Nginx イメージ サーバーを構築する方法

序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...

Vueのトランジションとアニメーションの深い理解

1. DOM要素を挿入、更新、または削除するときに、適切な場合は要素にスタイルクラス名を追加します。...

CSS はコンテナ レベル (div...) タグを 1 つの位置 (ページの右端) に固定します。

コードは次のようになります。 。プロセス{ 境界線:1px 実線 #B7B7B8; 背景:#F8F8...

Nginx ローカル ディレクトリ マッピング実装コード例

他のデバイスの画像をローカルディレクトリにマウントするなど、サーバー上の静的リソースにアクセスする必...

CentOS8 でローカル yum ソースを構成するための詳細なチュートリアル

centos8 ディストリビューションは、BaseOS および AppStream リポジトリを通じ...

HTML 編集の基礎 (初心者必読)

DREAMWEAVER を開き、新しい HTML を作成します。 。ボディの特性: bgcolor...

ログインフォームを実装するためのJavaScript

この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共...