axios 二次封装

对axios的二次封装，通过iView对请求、响应样式美化。

基础代码：

// main.js

import Vue from 'vue';
import App from './App';
import iView from 'iview/dist/iview.js';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

new Vue({
    render: h => h(App)
}).$mount('#app');

axios封装代码：

import Vue from 'vue';
import axios from 'axios';
import qs from 'qs';

// 配置接口地址 process.env.VUE_APP_API_URL
axios.defaults.baseURL = http://localhost:8080;
//超时时间
axios.defaults.timeout = 18000;

// 添加请求拦截器
axios.interceptors.request.use(function(config) {
    Vue.prototype.$Loading.start();
    //改为模拟表单的提交方式并且序列化数据
    if (config.enctype) {
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        config.data = qs.stringify(config.data);
    }
    return config;
}, function(error) {
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    Vue.prototype.$Loading.finish();
    //发送响应之后做一些事情;
    if (response.data.code !== undefined) {
        switch (response.data.code) {
            case 0:
                // 加载数据提示信息
                if (response.data.message) {
                    Vue.prototype.$Message.success(response.data.message);
                }
                break;
            case 996:
                // 未登录
                window.open('login.html', '_self');
                break;
            case 998:
                // 无权限访问
                window.open('warning.html', '_self');
                break;
            default:
                Vue.prototype.$Message.warning(response.data.message);
        }
    }
    return response;
}, function(error) {
    Vue.prototype.$Loading.error();
    if (error.response) {
        switch (error.response.status) {
            case 404:
                Vue.prototype.$Message.error('服务器找不到此请求');
                break;
            case 500:
                Vue.prototype.$Message.error('服务器不能执行此请求,请稍后重试');
                break;
            default:
                Vue.prototype.$Message.error('未知错误请联系管理员');
        }
    }
    return Promise.reject(error);
});

// GET请求
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
                params: params
            })
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data);
            });
    });
}

// POST请求
export function post(url, params, config) {
    return new Promise((resolve, reject) => {
        axios.post(url, params, config)
            .then(res => {
                    resolve(res.data);
                },
                err => {
                    reject(err.data);
                })
            .catch(err => {
                reject(err.data);
            });
    });
}


// HTTP请求
export function http(config) {
    return new Promise((resolve, reject) => {
        axios.request(config)
            .then(res => {
                    resolve(res);
                },
                err => {
                    reject(err);
                })
            .catch(err => {
                reject(err);
            });
    });
}

猜你喜欢