axios二次封装，达到前端架构多人协同开发，很强扩展性

前言：此接口封装是借鉴多位牛人代码提炼出来的，但是还存在考虑不周的地方，请大家多多指教

贴出代码前，解释下代码，用编号1、2、3等来说明

编号1应用到axios、vuex、router以及element-ui的提示

编号2罗列使用到的接口，满足多接口使用

编号3是示例管理员的接口封装

编号4是对很多个编号3接口的统一出口

编号5是vue脚手架统一入口引入

编号6是使用接口的示例

1. http.js代码

/**
 * src/utils/http.js
 */
/**
 * axios封装
 * 请求拦截、响应拦截、错误统一处理
 */
import axios from 'axios'
import store from '@/store'
import router from '@/router'
import { Message } from 'element-ui'

/**
 * 提示函数
 */
const tip = (msg, type) => {
    Message({
        message: msg,
        duration: 1000,
        type: type ? type : 'info'
    });
}

/**
 * 跳转登录页
 * 携带当前页面路由，登录页面完成登录后返回当前页面
 */
const toLogin = () => {
    router.replace({
        path: '/login',
        query: {
            redirect: router.currentRoute.fullPath
        }
    })
}

const errorHandle = (status, msg) => {
    // 状态码判断
    switch (status) {
        // 401 未登录状态，跳转登录页
        case 401:
            toLogin();
            break;
        // 403 token过期
        // 清除token并跳转登录页
        case 3011:
            tip(msg);
            store.commit('loginSuccess', 'token');
            setTimeout(() => {
                toLogin();
            }, 1000);
            break;
        case 3012:
            tip('无权访问', 'error');
            break;
        // 404请求不存在
        case 404:
            tip('请求的资源不存在');
            break;
        default:
            tip(msg, 'error');
    }
}

// 创建axios实例
var instance = axios.create();

// 请求超时时间
instance.defaults.timeout = 1000 * 12

// post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

/**
 * 请求拦截器
 * 每次请求前，如果存在token则在请求头中携带token
 */
instance.interceptors.request.use(
    config => {
        // 登录流程控制中，根据本地是否存在token判断用户的登录情况        
        // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token        
        // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码        
        // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作
        const token = store.state.token;
        token && (config.headers.Authorization = token);
        return config;
    },
    error => Promise.error(error)
)

// 响应拦截器
instance.interceptors.response.use(
    // 请求成功
    res => {
        if (res.status === 200) {
            if (res.data.code !== 0) {
                errorHandle(res.data.code, res.data.message)
                return false
            }
            return res
        } else {
            Promise.error(res)
        }
    },
    // 请求失败
    error => {
        const { response } = error
        if (response) {
            // 请求已发出，但是不在2xx的范围
            errorHandle(response.status);
            return false;
        } else {
            // 处理断网的情况
            // eg:请求超时或断网时，更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
            store.commit('changeNetwork', false);
        }
    }
)

export default instance;

2. base.js代码

/**
 * src/api/base.js
 */
/**
 * 接口域名的管理
 */

const base = {
    admin: '/admin',
    api: '/api/v1'
}

export default base;

3. admin.js代码

/**
 * src/api/admin.js
 */
import base from './base'
import axios from '@/utils/http'
import qs from 'qs'

const admin = {
    // 获取管理员列表
    getAdminList(params) {
        return axios.get(`${base.admin}/admin/list`, params);
    },
    // 新增管理员
    addAdmin(params) {
        return axios.post(`${base.admin}/admin/create`, qs.stringify(params))
    },
    // 编辑管理员
    editAdmin(params) {
        return axios.put(`${base.admin}/admin/update`, params)
    },
    // 删除管理员
    deleteAdmin(params) {
        return axios.delete(`${base.admin}/admin/delete`, params)
    }
}

export default admin;

4. index.js代码

/**
 * src/api/index.js
 */
/**
 * api接口的统一出口
 */

// 模块接口导入
import admin from '@/api/admin';

 // 导出接口
export default {
    admin,
}

5. main.js代码

/**
 * src/main.js
 */
// 将api挂载到vue原型上
Vue.prototype.$api = api;

6. Admin.vue代码

methods: {
	// 获取管理员列表
	async getAdminList() {
	    const res = await this.$api.admin.getAdminList({ params: this.queryInfo })
	    if (res) {
	        this.adminList = res.data.data.data
	        this.total = res.data.data.total
	    }
	}
}