请求拦截器

• 拦截器：在可以在请求之前额外添加参数
• 拦截器：在可以在请求之后统一处理返回结果

安装

pnpm install axios

使用

• 拦截器配置,创建 src/utils/request.ts，复制下面代码

import axios from 'axios'
import { ElNotification } from 'element-plus'
import router from '../router'
//例如axios对象的create方法，去创建axios实例
let request = axios.create({
    //配置接口地址
    baseURL: import.meta.env.VITE_APP_API_URL,
    //配置超时时间
    timeout: 6000,
});
//拦截器-请求之前
request.interceptors.request.use((config) => {
    //config配置对象,headers属性请求头，给服务器端公共参数
    config.headers['Authorization'] = '';
    config.headers['Content-Type'] = 'application/json;charset=UTF-8';
    return config;
})
//拦截器-请求之后
request.interceptors.response.use((response) => {
    //成功回调
    // 对响应数据做点什么
    if (response.data.code == -2) {
        //清除cache
        localStorage.clear();
        ElNotification.error("登录失效，请重新登录！")
        setTimeout(function () {
            //跳转
            router.push({
                path: "/"
            });
        }, 500)
    }
    return response.data;
}, (error) => {
    //失败回调：处理http网络错误
    let message = "未知错误！";
    let status = error.response.status;
    switch (status) {
        case 401:
            message = "TOKEN过期"
            break;
        case 403:
            message = "无权访问"
            break;
        case 404:
            message = "请求地址错误"
            break;
        case 500:
            message = "服务器出现问题"
            break;
    }
    ElNotification({
        type: "error",
        message: '[' + status + ']' + message,
    })
    return Promise.reject(error);
})
export default request;