VUEのCLIにカプセル化ヴュー-axios

共通/ post.js

インポート「Axios」からAxios // 導入Axios 
QS「QS」からのインポート// QS導入 
axios.defaults.baseURL =「/ APIの」// プロキシので、直接充填/ APIをここに要求するドメイン名のアドレス（

// 傍受を応答応答、エラー処理 
axios.interceptors.response.use（関数（応答）{
   // 正常に処理
  // コード処理 
  response.code = response.data.codeの
   スイッチ（のResponse.Status）{
       ケース 200がある：
         BREAK 、
     ケース 400 ：response.data.msg = '不正な要求"
       BREAK ;
     ケース 401：response.data.msg ='不正、再ログインしてください"
      BREAK ;
     ケース 403：response.data.msg = 'アクセスが拒否されました'
       BREAKを、
     ケース 404：response.data.msg = 'リクエストエラー、リソースが見つかりません'
       BREAK ;
     ケース 405：response.data.msg =「リクエストメソッドがありません'許可
       BREAKを、
     ケース 408：response.data.msg ='要求タイムアウト'
       BREAK ;
     ケース 500：response.data.msg ='サーバーエラー'
       BREAK ;
     ケース 501：response.data.msg ='ネットワークが実装されていません'
       BREAK ;
     ケース 502：response.data.msg = 'ネットワークエラー'
       BREAK ;
     ケース503：response.data.msg = 'サービスが利用できない'
       BREAK ;
     ケース 504：response.data.msg = 'ネットワーク時間'
       BREAK ;
     ケース 505：response.data.msg = 'HTTPリクエストをサポートしていないバージョン'
       BREAK ; 
  } 
     戻り応答を; 
} 関数（誤差）{ 
  
  返す; Promise.reject（誤差）
}）; 

非同期関数requestGet（オプション）{
 // これは、パッケージング後の主な方法であるが、同様の方法得る 
  options.method =「ポスト」IF（options.config === 'FORMDATA' ）{ 
    options.headers = { 'タイプのコンテンツ' 'マルチパート/ FORMDATA'} 
  }
  他の{ 
    options.data = qs.stringify（options.data）
  } 
  を返す 新しい新しい約束を（（解決、拒否）=> { 
    Axios（オプション）.then（RES => {
     //   これは主に、後続の決意のために返されたデータに基づいて、実際の状況に応じて
      IF（res.data.code == '200である' ）{ 
        解決（res.data）
      } 他{ 
        （res.data）拒否
      } 
    }）。キャッチ（エラー=> {
     // 表示インターセプタはrespone後読めるエラー処理
      にconsole.log（エラー）
    }）
  }）
} 

エクスポートデフォルト {} requestGet

main.js

インポート」../static/js/post.js'からポスト/ * POST公共* / 

constの} {requestPost =ポスト/ * POST * / 

Vue.prototype。$ requestPost = requestPost // POSTがグローバルマウント

ページ：

acceptlist（）{
                    この。$ requestGet（{ 
                    URL：この .http + '/ CDK / paperTypeMobile / findList' 、
                    データ：{} 
                }）を（RES。 => { 
                    にconsole.log（RES）
                    この .columns = res.obj 
                }）。キャッチ（ERR => { 
                    にconsole.log（ERR）
                }）
               }

注意：main.jsとpost.jsはaxiosを導入する、QS

VUEのCLIにカプセル化ヴュー-axios

おすすめ