使用してカプセル化axiosでVUEシンプル

、axiosパッケージ

モジュールVUEをインポートする必要がなくなり、使いやすさaxios使用するためには、パッケージがする必要があります：

1、新しいモジュールhttp.js

'axios'からインポートaxios // 设置基础apiUrl 
axios.defaults.baseURL = 'http://127.0.0.1:8000/' ; 
輸出デフォルト{ 
  インストール：機能（ヴュー）{ 
    Object.defineProperty（Vue.prototype、 '$ HTTP' 、{値：axios}）
  } 
}

2、輸入main.js

この時点でメソッドは$ HTTP VUEの例があります

「./plugins/http.js'からインポートMyServerHttp 

Vue.use（MyServerHttp）。

必要な場合3、呼び出し

非同期editUser（コンテキスト、オブジェクト）{
 // 进行调用、其中object._this为VUE实例
     CONST RES =はobject._thisを待つ。$ http.put（ `CRM /ユーザ/ $ {object.userId}`、object.form） ; 
      CONST {データ、メタ：{メッセージ、コード}} = res.data。
      もし（コード=== 2000 ）{ 
        context.dispatch（ "getAllUserList" 、{_this：object._this}）。
        object._this.editDialogFormVisible = 偽; 
        object._this $のmessage.success（メッセージ）。
      } 
    }、

インターセプタの第二に、使用

インターセプタは、のlocalStorageから取得要求をトークンに追加ヘッダとして、要求を送信する前にいくつかのアクションを行います。

// 傍受要求、/追加要求インターセプタ 
axios.interceptors.request.use（機能（設定）{
   // リクエストを送信する前に何かを
  IF（config.url！== "ログイン" ）{ 
    config.headers [ "認証「] = localStorage.getItem（ "トークン" ）; 
  } 

  戻りコンフィグ; 
}、機能（エラー）{
   // 何か間違っ行うための要求
  リターンPromise.reject（エラー）; 
}）;

第三に、レスポンダの使用

レスポンスを返し、その後、いくつかのフィルタリング操作等を行うために、事前にレスポンスの内容である、と。

// 追加応答ブロッカー 
axios.interceptors.response.use（関数（応答）{
   // 応答データ何か

  CONST RES = response.data; 

  IF（res.count）リターン応答

  IF （res.meta.code） {
     IF（res.meta.codeの=== 2002 ）{
       // リターンコード=== 2002は、コンテンツを視聴するには許可を得ずに返された場合は、全体のレスポンスを返す必要はありません 
      Message.warningを（「該当するデータを表示する権限がありません」）
    } 
    戻り応答

  } 他{
     戻り応答; 
  } 

}、関数（誤差）{
   // エラーに応答して何かのため
  返すPromise.reject（エラー）。
}）;

完全なパッケージコード：

インポート'Axios'からAxios 
メッセージからインポート{} 'UI要素' ; 

// CONST MyHttpServer = {}; 

// MyHttpServer.install =（ヴュ）=> { 
// 
//    // axios.baseURL =」HTTP： //127.0.0.1:8000/「; 
// 
//    //例の方法を追加
//    Vue.prototype $ = Axios HTTPを。
// 
// }; 
// 
// エクスポートMyHttpServerのデフォルトは


// 設定されたベースapiUrlの 
axios.defaults = .baseURL 'http://127.0.0.1:8000/' ; 

axios.defaults.withCredentialsの = trueに ; // 許さクッキー


// 傍受要求、/追加要求インターセプター
axios.interceptors.request.use（機能（設定）{
   // リクエストを送信する前に何もしない
  IF（config.url！== "ログイン" ）{ 
    config.headers [ '承認'] = localStorage.getItem（「トークン" ）; 
  } 

  戻りコンフィグ; 
}、機能（エラー）{
   // 間違って何かをするための要求
  リターンPromise.reject（エラー）; 
}）; 
// 
// 追加応答ブロッカー 
axios.interceptors.response.use（機能（応答）{
   // 何かに応答してデータ

  CONST RES = response.data; 

  IF（res.count）リターン応答

  のIF （res.meta.code）{
     IF（res.meta.code === 2002 ）{
       // リターンコード=== 2002場合は、コンテンツを視聴するには許可を得ずに返され、全体のレスポンスを返す必要はありません 
      Message.warningを（「対応するデータを表示する権限がありません」）
    } 
    の戻り応答

  } 他{
     リターン応答を; 
  } 

} 機能（エラー）{
   // エラーに応じて、何かのため
  のリターンPromise.reject（エラー）; 
}）; 


エクスポートデフォルト{ 
  インストールします。関数（ヴュ）{ 
    Object.defineProperty（Vue.prototype、 '$ HTTP' 、値{。} Axios）
  } 
}

http.js

使用してカプセル化axiosでVUEシンプル

おすすめ