axiosとは何ですか?Axios は、ブラウザと node.js で使用できる promise ベースの HTTP ライブラリです。 特性:
約束 axios は、ネイティブ ES6 Promise 実装に依存してサポートされます。環境が ES6 Promise をサポートしていない場合は、ポリフィルを使用できます。 Axios リクエストタイプ?一連のノード環境をインストールします。
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) を返します。 });
リクエストを取得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.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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Windows Server 2016 標準キー アクティベーション キー シリアル番号
目次フラット化とは何か再帰トストリング減らすアンダーコア_.平坦化_。連合_。違い要約するフラット化...
メタ属性には、name と http-equiv の 2 つがあります。 name 属性は主に、We...
1. 需要3 つのテーブルがあります。一定期間にわたるさまざまな抗生物質感受性の結果、つまり rep...
目次アレイ重複排除1 2層forループ(バブルソートの2層ループ記述に類似) 2 ループとインデック...
シナリオシミュレーション:国内企業の中には、重要な業務をサポートするために特定のウィンドウ プログラ...
Docker 公式ドキュメント: https://docs.docker.com/ Docker は...
システムをインストールした後、毎回いくつかのソフトウェアを再インストールする必要があります。ソフトウ...
序文指定した文字による結合または分割は一般的なシナリオです。MySQL では結合の記述は比較的簡単で...
序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...
1. DOM要素を挿入、更新、または削除するときに、適切な場合は要素にスタイルクラス名を追加します。...
コードは次のようになります。 。プロセス{ 境界線:1px 実線 #B7B7B8; 背景:#F8F8...
他のデバイスの画像をローカルディレクトリにマウントするなど、サーバー上の静的リソースにアクセスする必...
centos8 ディストリビューションは、BaseOS および AppStream リポジトリを通じ...
DREAMWEAVER を開き、新しい HTML を作成します。 。ボディの特性: bgcolor...
この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共...