VUEプロジェクトパッケージaxiosとアクセスインタフェース

1. UTILのSRCに新しいフォルダを作成し、utilのの新request.jsファイル：

パッケージaxios：

Axiosのインポートから 「Axios 」
インポートQS から 「QS 」;
 // ストアからインポート「@ /店舗/ index.js」; 
インポートメッセージ{} から 「要素-UI 」 ;   // 要素ライブラリプロンプトメッセージ、できません

/ / 環境の切り替え
 // IF（process.env.NODE_ENV == '開発'）{ // 開発
 //      axios.defaults.baseURL = '/ API';}
 // 他（IF process.env.NODE_ENV == 'デバッグ'）{ // テスト
 //      axios.defaults.baseURL =' https://www.ceshi.com 「。
//}
 // 他のIF（process.env.NODE_ENV == '生産'）{ // オンライン
 //      axios.defaults.baseURL = ' https://www.production.com ';
 // } 

// 要求時間 
= axios.defaults.timeout 15000 ; 

// POSTのリクエストヘッダ 
axios.defaults.headers.post [ ' のContent-Type ' ] = ' ファイルアプリケーション/ x-www-form-urlencodedで;のcharset = UTF-8 ' ; 

// 要求インターセプタある
axios.interceptors.request.use（
    設定 => {
         // 各トークンは、送信要求があるかどうかを決定する前に、存在する場合、統一されたヘッダのHTTPリクエストではないすべての要求を手動で追加、トークン結合されています
        CONSTトークン= ' 45f8f587-7b46-462f-a8c4-1ca4dc64a336 ' ;
         IF（トークン）{   //が存在する場合、トークンが存在するか否かを判定する、各HTTPヘッダーを加えたトークンである 
            config.headers.Token = トークン; 
        } 
        リターンコンフィグ; 
    }、
    エラーが => {
         戻りPromise.error（誤差）; 
    }）; 
// 応答ブロッカー
axios.interceptors.response.use（
    応答 => {
         IF（のResponse.Statusの=== 200である）{
             リターン約束を。 （レスポンス）を解決。
        } 他{
             戻りPromise.reject（応答）。
        } 
    } 
    // 服务器状态码不是200的情况 
    エラー=> {
         場合（error.response.status）{ 
            にconsole.log（エラー）
        } 
        戻りPromise.reject（error.response）を、
    } 
）; 

エクスポート関数のget（URL、のparams ）{
     返す 新しい約束（（解決、拒否）=> { 
        axiosは。取得（URL、
            { 
                のparams：のparams 
            }）
            .then（RES =>  {
                解決（res.data）; 
            }） 
            。キャッチ（ERR => {
                 場合（！err.response）{ 
                    メッセージ（{ 
                        showClose：真、
                        メッセージ：' 请求取得错误' 、
                        種類：' エラー' 
                    }）; 
                } 他{ 
                    ）（err.dataを拒否; 
                    にconsole.log （err.response、" 异常2' ）; 
                }
            }）
    }）。
} 

エクスポート機能ポスト（URL、のparams ）{
     返す 新しい約束（（解決、拒否）=> { 
        axios.post（URL、のparams ）
            .then（RES => { 
                ;決意（res.data）
            }） 
            。キャッチ（ERR => {
                 場合（！err.response）{ 
                    メッセージ（{ 
                        showClose：真、
                        メッセージ：' ポスト请求错误' 、
                        タイプ：「エラー」
                    }）。
                } 他{ 
                    （err.data）を拒絶します。
                    console.log（err.response、' 异常2 ' ）。
                } 
            }）
    }）。
} 

輸出デフォルト axios

2：utilのファイルで、その後api.jsファイルを作成します。

インポート{ 取得し、ポスト} から ' ./request ' 
エクスポート機能getTest（paramsは）{
     戻りポスト（ `/ API / TBK / dg_optimus_material`、paramsは）。
} 

エクスポート機能getNvZhuang（paramsは）{
     戻りポスト（ `/ API / TBK / dg_material_optional`、paramsは）。
}

3：htmlページのインターフェイスをご覧ください：

インポート{getTest、getNvZhuang} から " @ / UTIL / api.js "。// 导入API接口

  搭載：関数（）{ 
    この.queryList（）。
  }、
  メソッド：{ 
    // 精选
    queryList（）{ 
      せのparams = {PAGENO：1、のpageSize：20 }。
      getTest（paramsは）
        .then（RES => {
           この .jingxuanlist = 
            res.tbk_dg_optimus_material_response.result_list.map_data; 
          はconsole.log（この.jingxuanlist）  
        }）
        。キャッチ（エラー=> { 
          にconsole.log（エラー）; 
        }）; 
    } 
}

VUEプロジェクトパッケージaxiosとアクセスインタフェース

おすすめ