当前位置: 首页>后端>正文

二次封装axios

/* 
    封装axios
*/
// 弹窗
import { ElMessage } from "element-plus";
import axios from 'axios';
import store2 from 'store2'
// 创建一个 axios 的实例,并配置一些默认的参数
const instance = axios.create({
    /**
     * 基准地址
     * request.get('/abcd')      => http://127.0.0.1:5173/abcd
     * 后续处理本地开发与生产上线的环境变量
     */
    baseURL: "/api",  // 不加协议、域名、端口  默认本地
    /**
     * 赶超时间 单位是毫秒
     * 发出请求后300ms后未响应,请求会直接中断
     */
    timeout: 300,
    /**
     * 自定义请求头
     */
    headers: {
        "hello": 'gogogo',
    }
});
/**
 * 请求拦截器
 */
instance.interceptors.request.use(
    /* 
        成功  config请求的配置项 
        应用场景:统一配置token
    */
    (config) => {
        // 自定义一个配置项
        const token = store2.get("token")
        if(token){
            config.headers.Authorization=token;
        }
        return config;  // 必须返回
    },
    // 失败
    (error) => {
        return Promise.reject(error); // 必须返回
    })
/**
 * 响应拦截器
 */
instance.interceptors.response.use(
    /**
     * 响应成功  response是axios包装的对象
     *  必须返回数据, .then的回调函数参数
     *  触发时机
     * 1、接口请求成功,HTTP状态码为2xx或304(协商缓存,也是成功的)
     * 2、在业务代码的 .then之前触发
     */
    (response) => {
        // 获取数据
        const { data } = response;
        // 判断业务是否成功
        if (data.code === 1000) {
            // 返回数据
            return data.data;
        } else {
            ElMessage.error(data.message)
            return Promise.reject(response);
        }
    },
    /**
     * 必须返回 return Promise.reject(error)
    *  触发时机
    * 1、接口请求成功,HTTP状态码非 为2xx或304(协商缓存,也是成功的)
    * 2、在业务代码的 .then之前触发
    */
    (error) => {
        // 根据 HTTP 状态码来处理不同的业务逻辑
        console.log("error", error);
        //    1. 获取到 HTTP 状态码
        const { status } = error.response; // 服务器的信息
        //    2. 获取中文的错误描述
        const { message } = error.response.data;  // 后端的信息
        //    3. switch
        switch (status) {
            case 401:
                // 没有权限
                ElMessage.error(message);
                break;
            case 502:
                // 没有权限
                ElMessage.error("网关错误");
                break;
            case 503:
                // 没有权限
                ElMessage.error("服务器异常,请稍后重试");
                break;
            default:
                break;
        }
        return Promise.reject(error);
    })
export default instance;

https://www.xamrdz.com/backend/3zp1933859.html

相关文章: