vue中axios模块化简易封装

2019-12更新 实际效果很差，看看就好

---

在实际开发过程中，需要对AJAX请求进行统一的封装，使其模块化，易于修改和操作。

直接上代码

var get = function(modules, _axios) { // 创建axios请求，等待执行
    Object.keys(modules).forEach(module => {
        let data = {...modules[module] }
        modules[module] = function(payload) {
            return _axios({
                method: data.method,
                url: data.url,
                ...payload
            })
        }
    })
}

function _axios(create, request, response) { // 为axios添加create和拦截
    console.log(arguments)
    var API = axios.create({
        ...create
    })
    API.interceptors.request.use(request.resolve ? request.resolve : config => config, request.reject ? request.reject : err => console.log(err))
    API.interceptors.response.use(response.resolve ? response.resolve : response => response, response.reject ? response.reject : err => console.log(err))
    return API
}

function getAPI(data) { // 主要函数
    var _axios = _axios(data.create ? data.create : {}, data.request ? data.request : {}, data.response ? data.response : {}) // 将传入的create和拦截器放入
    var modules = data.modules // 是否模块化分割
    if (data.module) { // 模块化分割
        Object.keys(modules).forEach(val => {
            let module = modules[val]
            get(module, _axios)
        })
    } else { // 非模块化分割
        let module = modules
        get(module, _axios)
    }
    return { modules, _axios }
}
export default getAPI

在调用时

import Vue from "vue";
import getAPI from './index'

var apiMod = {
    request: { // 请求时拦截
        resolve: config => {
            console.log(config)
            let token = window.sessionStorage.token
            if (token) {
                config.headers.authorization = token
            }
            if (config.url.indexOf('htm') > -1 || config.url.indexOf('userbehavior/export') > -1 || config.url.indexOf('order/export') > -1 || config.url.indexOf('program/exportProgram') > -1 || config.url.indexOf('program/exportCategory') > -1 || config.url.indexOf('program/exportTuijian') > -1) {
                config.responseType = 'blob'
            }
            return config
        },
        reject: err => {
            console.log(err)
        }
    },
    response: { // 响应时拦截
        resolve: response => {
            console.log(response)
            if (response.headers.authorization) {
                window.sessionStorage.token = response.headers.authorization
            }
            if (response.config.url.indexOf('htm') > -1 || response.config.url.indexOf('userbehavior/export') > -1 || response.config.url.indexOf('order/export') > -1 || response.config.url.indexOf('program/exportProgram') > -1 || response.config.url.indexOf('program/exportCategory') > -1 || response.config.url.indexOf('program/exportTuijian') > -1) {
                return response.data
            }
            if (response.status === 200) {
                return response
            } else if (response.status > 200 && response.status < 300) {
                return new Promise.reject(err => {
                    console.error('200错误', response.status, err)
                })
            } else if (response.status > 500) {
                return new Promise.reject(err => {
                    console.error('服务器错误', response.status, err)
                })
            } else {
                return new Promise.reject(err => {
                    console.error('错误', response.status, err)
                })
            }
        },
        reject: err => {
            console.log(err)
        }
    },
    create: {
        baseURL: process.env.VUE_APP_API_URL,
        timeout: 10000,
    },
    module: false, // 不进行模块化
    modules: {
        login: {
            method: 'POST',
            url: '/login',
            name: '登录'
        },
        selectGrailGeneralStatis: {
            method: 'GET',
            url: '/grail/selectGrailGeneralStatis',
            name: '大盘数据基本信息统计'
        },
        selectGrailProgramStatis: {
            method: 'POST',
            url: '/grail/selectGrailProgramStatis',
            name: '大盘数据节目统计'
        },
        selectGrailCategoryStatis: {
            method: 'POST',
            url: '/grail/selectGrailCategoryStatis',
            name: '大盘数据栏目统计'
        },
        exportGrailExcel: {
            method: 'POST',
            url: '/grail/a.htm',
            name: '导出大盘数据excel'
        },
    }
}

let axios = getAPI(apiMod)
console.log(axios)
Vue.prototype.API = axios.modules

(PS：有用的只有对请求路径进行模块化分割，其他的封装都有点多此一举…)
个人练习，记录个人从萌新到放弃之路，欢迎提意见