项目中封装的axios

把每个一级菜单按照模块去区分在urls文件中进行统一管理
把get 和post请求进行拦截，以此进行方便页面传参， get和post传参方式一样方便使用。

main.ts中

import post from './apis/index'; 
Vue.prototype.$post = post;   // 挂载到全局将$post

request.ts中

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
import { Message } from 'element-ui';
// import { eachProp } from '@/utils/Object';
// import { isNull } from '@/utils/Common';
import { setCookie, delectAll } from '@/utils/cookieOperation';
// import router from '../router'
const service: AxiosInstance = axios.create({
    baseURL: '/api', // api的base_url
    withCredentials: true, //跨域请求是否需要使用凭证
    timeout: 50000, // 请求超时时间
});
/**
 * get请求，将request中的data，包装到url上
 */
function wrapParamUrl(originUrl: string | undefined, data: any) {
    let url = `${originUrl}?`;
    if (data) {
        eachProp(data, (prop) => {
            if (!isNull(data[prop])) {
                url += `${prop}=${data[prop].toString()}&`;
            }
        });
    }
    url = url.substring(0, url.length - 1);
    return url;
}

function eachProp(obj:Object, callback:(propName:string)=>void){
    Object.keys(obj).forEach(callback)
}

function isNull(target:any){
    return target === undefined || target === null
}
// request拦截器
service.interceptors.request.use((originConfig: AxiosRequestConfig) => {
    const config = originConfig;
    const method = String(config.method).toUpperCase();
    if (method === 'POST') { 
       
    } else if (method === 'GET') { // 将data中的参数拼接到url中
        config.url = wrapParamUrl(config.url, config.data);
    }
    return config;
}, error => Promise.reject(error));
// response拦截器
service.interceptors.response.use(
    (response) => {
        // 约定后台返回特殊的code码 当前状态为登录跳转
        if (response.data.status == '约定code码') {
            sessionStorage.clear(); //  清除保存在sessionStorage中的数据
            setCookie('username', null) // 清除cookie中保存的username
            const msg = "请登录！";
            Message.error(msg);
            router.push({  
                name: 'Login'   // 路由跳转到登录
            })
        } else if (response.data.status === 403) {
            const msg = "抱歉，您没有权限进行此操作！";
            Message.error(msg);
        }
        return response;
    },
    (error) => {
        return Promise.reject(error);
    },
);
// @ts-ignore
export default service;

index.ts

import io from '@/apis/request'
import urls, { PostModule, PostUrl } from './urls'
const post: any = {}
// 遍历urls文件中所有模块
urls.forEach((module: PostModule) => {
    post[module.moduleName] = {};
    module.urls.forEach((url: PostUrl) => {
        // 生成异步请求方法
        // @ts-ignore
        post[module.moduleName][url.name] = (data: any) => io({
            url: url.url,
            // 默认所有方法都是post请求
            method: url.type,
            data
        });
    });
});
/**
 * 接口的调用格式为 Vue.$post.[moduleName].[postName](data)
 * 例如：Vue.$post.user.login(data)
 * 在 Vue 组件中，Vue 可以用 this 替代
 *
 * 注意：需要在 main.js 中添加如下代码：
 * import post from '@/apis';
 * Vue.prototype.$post = post;
 */
export default post;

urls.ts中

export class PostUrl {
    constructor(public name: string, public url: string, public type: string) {

    }
}

export class PostModule {
    constructor(public moduleName: string, public baseUrl: string, public urls: Array<PostUrl>) {

    }
}

// 使用 
const postModule: Array<PostModule> = [
    new PostModule('login','',[
        new PostUrl('login','地址','post')
    ])
]

.vue组件中使用

// Vue文件内应用 
this.$post.login.login().then(res =>{
    // 请求后操作
})