1.axiosインストール
axiosインストールNPM 'axios'から輸入axiosを
2.axiosの使用
形式は使用します
1.axios({設定})。次に(RES => {にconsole.log(RES)})。キャッチ(ERR => {にconsole.log(ERR)}) 請求RESデータ//解像度が得られます。データ取得したデータであり、残りのデータを自動的Axiosを搭載して、 //プロミスAxios機能を統合は、格納されてもよい得られたデータオブジェクトとして記憶することができる。 2.axios.get(「URL」、{paramsが:{特定のパラメータを取得内側に置か}});
//が自動的にURLアドレスへのアダプタのリクエスト特別な配置パラメータparamsは、もちろん、直接URLに書き込まれます。 3.axios。ポスト(「URL」、{データ :{ ポスト固有パラメータの内部に配置}});
//ポストリクエストの特定、ポストパラメータは、データ属性セット内に配置しなければならない。 4.axios.delete(「URL」、{})。 5.axios.head( 'URL'、{}); 6.axios.put( 'URL'、{}); .... Axios最も簡単なアプリケーションでは、最初の行が残っています
3.基本構成(グローバル)
Axios(最も簡単なアプリケーション手段)が唯一のパラメータ ``} {設定パラメータであり、パラメータ要求は、多くの構成属性が繰り返されていることを何度もあり、プロトタイプオブジェクトチェーン構成JSと同様グローバルコンフィギュレーションを設定することが可能です
注:グローバルコンフィギュレーションした後、このプロジェクトは、デフォルトの設定axiosすべてを使用しますが、同じ構成グローバル設定は、例えば、同時に一つだけ存在することはできませんすることができる2つのbaseURL
axios.defaults。=構成属性「値は」
// axiosのこの項目に対応するデフォルトの属性を変更します
4.常用配置
要求アドレスURL:「...」 リクエストメソッドの種類:デフォルトは取得する//取得 要求ルートベースURLを:// URLは絶対位置、ルート・パス『https://www.baidu.com/』の場合ではありませんURLが自動的に追加される前に 要求データがtransformRequest処理する前に、(データを)=> { ...} データ処理transformResponse要求(データ)=> { ...} カスタムリクエストヘッダのヘッダを:{... } GET要求パラメータparamsは:{...} POSTリクエストパラメータデータ:{...} (JSON)関数paramsSerializerのパラメータの配列:(paramsは)=> { ...}
5.axiosインスタンス化
グローバルコンフィギュレーションとの関係、全体axiosは唯一のグローバル・コンフィギュレーションを持つことができるので、異なる構成のコールと同等の複数のインスタンスを持つことができますなぜインスタンス化します
得られた「axios」からインポートaxiosによってグローバルAxios Axiosある、Axiosは、グローバルグローバルコンフィギュレーションの両方に配置された提供しました
グローバルaxios == ==「axiosインスタンスを生成する(例えば、すなわち、実施例の全体構成、構成例と呼ぶ上に配置されました)
異なるサーバの面では、対応するインスタンスを生成します
世代
CONST instancel = axios.create({構成の内部構成例が書かれたものです})
instancelグローバル共有設定する場合インスタンス用に構成されているインスタンスを作成するに書き込まれた同じメソッドaxiosを有する
({URL: '...' instancelを })。次に、(RES => {...})// 例申し込み方法
6.axiosノート
思考:requrst.jsに、ファイルが作成され、唯一のAxios例を引き出され、一度しか参照さaxios、他のファイルからは、アプリケーションが異なる例に対応する機能に書き込まれる(home.js)は、最後のファイルを他のVUEによって参照しますこれらの機能が適用されます
axios→requrst.js(および異なるインスタンスを作成するために戻り、中のbaseURL)→home.js(受け入れ例えば、対応するアプリケーション機能を作成)→VUEファイル(または対応する参照home.js関数呼び出しとアクセスアプリケーション値)
なぜ、大きな面積を防ぐために、サードパーティ製のプログラムは、もはや正常に実行するために正常な機能を確保するためにのみ変更されたファイルのみrequrst.js、自分の手書き入力と出力ファイルの残りの部分、これを行うために、更新されていないか、変更されているので、
以下は、詳細なコードです
requrst.js
インポート'Axios'からAxios、 エクスポート機能要求(設定){ CONST = axios.createインスタンス({ ベースURL: "... " //ベースURL:" ..."、 タイムアウト:0000 }); //送信実ネットワーク要求は、 インスタンス(設定)を返します; }
home.js
'./request.js'からインポート{要求} エクスポート機能getHomeMultidata(){ 復帰要求({URL: '/ホーム/マルチデータ'}) } エクスポート関数getHomeGoods(タイプ、ページ){ 復帰要求({URL:' /ホーム/データ」のparams:{タイプ、ページ}}) }
VUEファイル
<script> "ネットワーク/ home.js @"からインポート{getHomeMultidata}。//引用 搭載(){ getHomeMultidata()、次いで(RES => {//执行。 this.banners = res.data.banner.list; this.recommends = res.data.recommend.list; }); } </ SCRIPT>
6.インターセプター
更新します