axios二次封装

import axios from "axios";
import router from "../router/index";

export default function (config) {
    // 创建一个axios实例
    const instance = axios.create({
        //请求的根路径写在此处
        baseURL: '/api',
    });
    // 路由守卫

    // 如果没有携带token  则跳转到登录页面
    instance.beforeEach((to, from, next) => {
        if (to.path === '/login') return next();
        const token = window.sessionStorage.getItem('token');
        if (!token) return next('/login')
        next()
    })

    // 添加请求拦截器
    instance.interceptors.request.use(config => {
        config.headers.Authorization = sessionStorage.getItem('token')
        return config
    }, error => { return Promise(() => { }) })
    // 添加响应拦截器
    instance.interceptors.response.use(response => {
        // 对响应数据做一些事情
        return response.data;
    }, error => {
        // 请求错误时做些事
        let status = "";
        if (error.request) {
            status = error.request;
        } else if (error.response) {
            status = error.response;
        }
        if (status) {
            switch (status.status) {
                case 400:
                    error.message = "请求错误(400)";
                    break;
                case 401:
                    error.message = "未授权，请重新登录(401)";
                    // router.push("/401");
                    break;
                case 403:
                    error.message = "拒绝访问(403)";
                    break;
                case 404:
                    error.message = "请求出错(404)";
                    router.push("/404");
                    break;
                case 408:
                    error.message = "请求超时(408)";
                    break;
                case 500:
                    error.message = "服务器错误(500)";
                    router.push("/a500");
                    break;
                case 501:
                    error.message = "服务未实现(501)";
                    break;
                case 502:
                    error.message = "网络错误(502)";
                    break;
                case 503:
                    error.message = "服务不可用(503)";
                    break;
                case 504:
                    error.message = "网络超时(504)";
                    break;
                case 505:
                    error.message = "HTTP版本不受支持(505)";
                    break;
                default:
                    error.message = `连接出错(${error.response.status})!`;
            }
        } else {
            error.message = "连接服务器失败!,这里";
        }
        return Promise.reject(error);
    }
    );
    return instance(config)
}

使用的时候，引入并且封装接口

// axios二次封装
import http from './index.js'
//下面就是请求数据时的写法！

//比如获取用户列表信息如下：

// 获取所有用户信息
export const get_users = (params) => {
    return http({
        //请求方法
        method: "GET",
        //请求路径
        url: "users",

        //请求参数 （注意这里写的是params是因为是get请求，如果是其他请求例如post、put请求要写为data）
        params: params
    })
}