vue封装axios（token）

src目录下新建 api 文夹并新建 index.js 文件

写入

// 导入axios
import axios from 'axios';
import ElMessage from 'element-plus';

axios.defaults.withCredentials = true; //跨域

//1. 创建新的axios实例，
const service = axios.create({
    baseURL: process.env.BASE_API, // 公共接口
    timeout: 5000, // 超时时间
});

// 2.请求拦截器
service.interceptors.request.use(
    config => {
        //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
        config.data = JSON.stringify(config.data); //数据转化(自己选择)
        config.headers = {
            'Content-Type': 'application/json utf-8', // 配置请求头(自己选择)
        };
        const token = localStorage.getItem('token'); // token登录时存储
        if (token) {
            config.headers.Authorization = token; // token携带在请求头中
        }
        return config;
    },
    error => {
        Promise.reject(error);
    }
);

// 3.响应拦截器
service.interceptors.response.use(
    response => {
        //接收到响应数据并成功后的一些共有的处理，关闭loading等
        if (response.data.code == 4001) {
            ElMessage({
                message: response.data.data,
                type: 'warning',
            });
            // console.log(response.data)
            localStorage.removeItem('tokenkey');
            // 返回 401 清除 token 信息并跳转到登录页面
            window.location.href = '/NotFound';
            return Promise.reject(response.data.data);
        }
        return response;
    },
    error => {
        // 接收到异常响应的处理开始
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    localStorage.removeItem('tokenkey');
                    // 返回 401 清除 token 信息并跳转到登录页面
                    window.location.href = '/NotFound';
                    break;
                case 500:
                    ElMessage({
                        message: error.response.data.data,
                        type: 'error',
                    });
                    break;
                default:
                    error.message = `连接错误${error.response.status}`;
            }
        } else {
            // 超时处理
            if (JSON.stringify(error).includes('timeout')) {
                ElMessage.error('服务器响应超时，请刷新当前页');
            }
            error.message('连接服务器失败');
        }

        ElMessage.error(error.message);
        /***** 处理结束 *****/
        //如果不需要错误处理，以上的处理过程都可省略
        return Promise.resolve(error.response.data);
    }
);
//4.导入文件
export default service;

main.js中使用

import axios from './api/index.js'

app.config.globalProperties.axios = axios //全局挂载

 

使用

this.axios.get("url").then((res) => {
  this.list = res.data;
});