APIを制御するために、二つの方法axiosパッケージ

はじめに：我々は、開発プロジェクトでは、多くの場合、インタフェースの大きな数を処理する必要があるとのインターフェースは非常に各インターフェイスBASEURLは、開発環境の完了後になる場合切り替えるには、この時間を利用して同じテスト環境開発環境BASEURLの本番環境ではありません。トラブル（アドレスに変更する必要があり、各ページに移動するように要求）

したがって、より良いこれらのAPIを制御するために、我々はそのような修正や、より良い制御環境を切り替える。コードにあまり話をしなかったパッケージaxios定義された統一されたインタフェースのBASEURLを所有する必要があります！

自身がAPIにフォルダを作成する
。1つの Axios「Axios」からインポート
　 問題Java文字列処理するために
 2 QS「QS」からインポート 
 。3たAxiosタイムアウトと応答ヘッダーでインスタンスを作成する
 。4 CONST = HTTP axios.create（{
 5      のbaseURL：process.env.VUE_APP_MOCK_DATA_URL、// BASE_URLのAPI 
6。      タイムアウト：3000 、
 7つの。     ヘッダー：{
 8。          'タイプのコンテンツ'： 'ファイルアプリケーション/ JSON;のcharset = UTF-8'
 9      }
 10  }）
 11。 / * *
 12  送信要求場合*要求インターセプタを分析する情報を追加することができる
 13である  * / 
14 http.interceptors.request.use（設定=>{
 15     *****
 16      リターン設定
 。17 }、エラー=> {
 18は、     戻りPromise.reject（エラー）
 。19  }）
 20  
21である / * *
 22れる *傍受データに応答して行うことができる分析返さ 
 23   * / 
24 http.interceptors.response.use（レスポンス=> {
 25        
26であり     、リターン応答
 27 }、エラー=> {
 28      リターンPromise.reject（エラー）
 29  }）
 30  
31である 
32に封入さaxiosを露出させるために
 33でエクスポートデフォルト HTTP

Main.jsは、本明細書に組み込まれ、プロトタイプオブジェクトに取り付けられました

1からの輸入のhttp '@ / API / api.js'

2 Vue.prototype。$のHttp = HTTP

複雑さのレベルの数は、パッケージができるように高くない場合、APIの最初のカプセル化フォーマットは、一般的に、特に高くありません

第二の方法

1 '厳密使用'
 2  
。3も同じ2つのパケットの導入を必要とする
。4 Axios 'Axios'からインポート
 。5 QS 'QS'からインポートする
 。6  
。7  // 得られた設定デフォルト要求インターセプタURL接頭辞
。8  // axios.defaults.baseURL ？= process.env.NODE_ENV === '生産' '/ custInfo'：
9  //    '127.0.0.1:8888'、
11  //    axios.interceptors.request.use（設定=> { 
12である //      // / /ロード
13はある //      リターン設定
14  //    }、エラー=> { 
15  //は     プロミスを返します。リジェクト（エラー） 
16  //    }）
17 //  
18である // axios.interceptors.response.use（応答=> { 
19  //は   応答を返す
20は // }、エラー=> { 
21は //    Promise.resolve（error.response）を返す
22は // }）
23であり、 
24エクスポートデフォルト{
 25    POST（URL、データ）{
 26は、     返す 新しい新プロミス（（決意を拒否）=> {
 27        Axios（{
 28          方法： 'POST' 、
 29          URL、
 30          // QSは、このプラグインは、バックグラウンドのjavaを解決するために主です受け取ったパラメータは文字列でなければなりません
31         データ：qs.stringify（データ）、
 32の         ヘッダー：{
 33            'のContent-Type'：「アプリケーション/ x-www-form-urlencodedで。文字セット= UTF-8'
 34          }
 35        }）。次に、（（RES）=> {
 36          決意（RES）
 37        }）。キャッチ（（エラー）=> {
 38          リジェクト（エラー）
 39        }）
 40      }）
 41    }、
 42    GET（URL、paramsは）{
 43      リターン 新しいプロミス（（決意、リジェクト）=> {
 44        axios（{
 45          の方法： '取得する'、
 46は、         URL、
 47          paramsは、// パラメータ帯域GET要求
48        }）。次に、（（RES）=> {
 49          解決（RES）
 50        }）。キャッチ（（エラー）=> {
 51である         （エラー）を拒否
 52れます       }）
 53      }）
 54    }
 55 }

　　このような良いパッケージした後、我々は、すべてのインターフェイスは、フォルダを作成するために一緒に書かれている置くことができます

    getCustValue（paramsは）{
         返す（ '/ custOverview / getCustValue' $ http.postを、paramsは）。
    }、
    getTacntrt（paramsが）{
         返す（ '/ dictの/ getTacntrtMgmtMsgMonth' $ http.getを、paramsは）。
    }、
    クエリ（paramsは）{
         返す（ '/ indexManager / queryVipFlowCount' $ http.postを、paramsは）。
    }

　　その後、我々は非常に良いソートAPIを列挙することができます

　　ああ、ありがとうなどを指すように忘れないでください！

APIを制御するために、二つの方法axiosパッケージ

おすすめ