Vue2.0 + Vux案例：愛柯南之五、引入axios

標籤：targe   登入   response   ams   row   catch   簡單   reject   request   

轉載請註明出處：http://www.cnblogs.com/shamoyuu/p/vue_vux_app_5.html

 

項目github地址：https://github.com/shamoyuu/vue-vux-iconan

 

我們引入vux的toast外掛程式，為了能在任何地方使用toast（不僅僅是在組件中，比如store.js中），我們修改main.js

import Vue from "vue"import App from "./App"import router from "./tools/router"import store from "./tools/store"import { ToastPlugin } from "vux"import TestDirective from "./directives/common/TestDirective"import api from "./tools/api"import errorHandle from ".//tools/errorHandle"Vue.config.productionTip = false;const FastClick = require("fastclick");FastClick.attach(document.body);Vue.use(ToastPlugin, { type: "text", position: ‘bottom‘, width: "70vw" });Vue.use(TestDirective);Vue.use(api);Vue.use(errorHandle);Vue.prototype.instance = new Vue({    el: ".app",    router: router,    store: store,    template: "<App/>",    components: { App }});

修改的地方就圖中紅色的部分，最後一句比較重要，這樣我們可以在任何地方引用到vue的執行個體，從而達到任何地方都使用toast的目的。

只要能擷取到Vue對象，就可以通過下面的方式來彈出toast

Vue.prototype.instance.$vux.toast.show("message")

 

 

 

然後我們添加axios

npm install --save-dev axios

然後我們建立一個檔案tools/axios.js檔案

import axios from "axios"import Vue from "vue"//設定全域請求為ajax請求axios.interceptors.request.use((config) => {    config.headers["X-Requested-With"] = "XMLHttpRequest";    return config;});//錯誤處理axios.interceptors.response.use(    (response) => {        const result = response.data;
        //stateCode為0表示正常返回資料，其他情況表示有錯誤，錯誤資訊由message提供        switch (result.stateCode) {            case 0:                return result.data;            case 1:                //沒有登入                break;            case 2:                //其他錯誤                break;            default:                break;        }        const err = new Error(result.message);        err.data = result;        err.response = response;        throw err;    },    (err) => {        if (err && err.response) {            switch (err.response.status) {                case 400:                    err.message = "請求錯誤";                    break                case 404:                    err.message = "請求地址不存在";                    break                case 408:                    err.message = "網路異常，請稍後重試[408]";                    break                case 500:                    err.message = "網路異常，請稍後重試[500]";                    break                case 501:                    err.message = "網路異常，請稍後重試[501]";                    break                case 502:                    err.message = "網路異常，請稍後重試[502]";                    break                case 503:                    err.message = "網路異常，請稍後重試[503]";                    break                case 504:                    err.message = "網路異常，請稍後重試[504]";                    break                case 505:                    err.message = "網路異常，請稍後重試[505]";                    break                default:            }        }        else {            err.message = "網路異常，請稍後重試";        }        Vue.prototype.instance.$vux.toast.show(err.message);        return Promise.reject(err);    });export default axios;

這個檔案的內容很簡單，唯一需要注意的是攔截response請求的那部分，我們約定使用下面的格式

{    "stateCode": 0,    "data": "當stateCode為0時有效，表示正常返回的資料"    "message": "當stateCode不為0時有效，表示錯誤資訊"}

所以在stateCode==0的時候，我們直接返回了result.data，其他的資訊直接丟棄了，因為頁面不需要關心。

這裡如果正常返回了資料（200狀態），那麼是否需要彈出message資訊由頁面決定，而其他非200的異常都會預設彈出toast提示。

 

然後我們建立一個錯誤處理的檔案tools/errorHandle.js

export default {    install(Vue) {        Vue.prototype.$errorHandle = function (errorData) {            //如果返回200，則彈出message            if (errorData.response && errorData.response.status == 200) {                if (errorData.data && errorData.data.message) {                    Vue.prototype.instance.$vux.toast.show(errorData.data.message);                }            }            else {                //如果是非200，其他錯誤在這裡處理            }        }    }}

然後我們建立一個tools/api.js檔案，將axios再封裝一下，順便讓它變成全域對象。

import axios from "@/tools/axios"export default {    install(Vue) {        Vue.prototype.$api = {            get(url, params) {                return axios.get(url, {                    params: params                })            },            post(url, params) {                return axios.post(url, params);            }        }    }}

 

至此，我們成功地引入了axios，來寫個例子，在任意組件添加下面的代碼

mounted: function() {
    this.$api.get("http://xxx.xx.com/xxxx/getlist", {        id: "1"    })    .then(function(data) {        console.info("成功", arguments);    })    .catch(this.$errorHandle);}

這裡對錯誤的處理並沒有放到then的第二個參數上，而是單獨寫了catch，這樣寫比較清晰一點。

如果不寫這個catch，對狀態200且stateCode != 0的錯誤不會有任何提示（某些情況下可能真的不需要提示）。

 

 

這個是狀態404的錯誤提示，不管寫不寫catch都會彈出來。

 

這個是狀態200，但是stateCode != 0時的錯誤提示，必須寫了.catch(this.$errorHandle)才會觸發。

 

Vue2.0 + Vux案例：愛柯南之五、引入axios