封裝axios

vux項目中：

api地址：

https://www.kancloud.cn/yunye/axios/234845

在main.js文件加下：

import axios from 'axios'
import qs from 'qs'
let axiosIns = axios.create({});

if (process.env.NODE_ENV == 'development') {
    axiosIns.defaults.baseURL = '***';
} else if (process.env.NODE_ENV == 'debug') {
    axiosIns.defaults.baseURL = '***';
} else if (process.env.NODE_ENV == 'production') {
    axiosIns.defaults.baseURL = '***';
}

axiosIns.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
axiosIns.defaults.headers.get['X-Requested-With'] = 'XMLHttpRequest';
axiosIns.defaults.responseType = 'json';
axiosIns.defaults.transformRequest = [function (data) {
    //數據序列化
    return qs.stringify(data);
}
];
axiosIns.defaults.validateStatus = function (status) {
    return true;
};
axiosIns.interceptors.request.use(function (config) {
    //配置config
    config.headers.Accept = 'application/json';
    // config.headers.System = 'vue';
    // let token = Vue.localStorage.get('token');
    // if(token){
    //     config.headers.Token = token;
    // }
    return config;
});
axiosIns.interceptors.response.use(function (response) {
    let data = response.data;
    let status = response.status;
    if (status === 200) {
        return Promise.resolve(response);
    } else {
        return Promise.reject(response);
    }
});

let ajaxMethod = ['get', 'post'];
let api = {};
ajaxMethod.forEach((method)=> {
    //數組取值的兩種方式
    api[method] = function (uri, data, config) {
        return new Promise(function (resolve, reject) {
            axiosIns[method](uri, data, config).then((response)=> {
                /*根據後臺數據進行處理
                 *1 code===200   正常數據+錯誤數據     code!==200   網絡異常等
                 *2 code===200   正常數據     code!==200   錯誤數據+網絡異常等
                 * 這裏使用的是第一種方式
                 * ......
                 */
                if (response.data.StatusCode) {
                    //toast封裝：  參考ele-mint-ui
                    Toast({
                        message: response.data.Message,
                        position: 'top',
                        duration: 2000
                    });
                    if (response.data.Message === '未登陸') {
                        Toast({
                            message: response.data.Message,
                            position: '',
                            duration: 2000
                        });
                        //使用vue實例作出對應行爲  change state or router
                        //instance.$store.commit('isLoginShow',true);
                    }
                } else {
                    resolve(response);
                }
            }).catch((response)=> {
                //reject response
                //alert('xiuxiu，限你10分鐘到我面前來,否則...');
            })
        })
    }
});

Vue.prototype.$axios = api;

//.....
let instance =new Vue({
    store,
    router,
    el: '#app',
    render: h => h(App)
});

/* 1 根據process.env.NODE_ENV 獲取對應的apiDomain
 * 2 處理ajax庫axios，爲了之後不重複引用，掛在原型對象上
 * 3 axios是封裝在main.js裏面的，是爲了獲取vue實例操做store、router
 * 4 組件裏面使用this.$axios.get or  this.$axios.post 調用  使用debugger，查看接口返回數據的走向
 */

 

純屬借鑑，還有些地方不明白，暫存此處，供下次細細推敲。

https://github.com/zaofeng/just_for_base/blob/master/vue/main.js

http://blog.csdn.net/quanquanxiu/article/details/76718468