antd+react+v6+axios的拦截器封装

关于这个，其实很简单，只是在拦截器中进行业务操作就可以了，我们代码就直接照搬axios官方示例进行一些简单改造。其实逻辑很简单，只是有些人没接触过，就会无从下手

import axios from "axios";
//引入这个antd是为了显示一些信息提示，不需要自己写组件会很方便的
import {notification} from "antd";
//引入这个routes是为了后续跳转页面使用，当然如果不考虑服务端渲染可以直接使用window的方法
import routes from "../router/index.jsx";
//这里会去定义一些默认参数，比如默认请求头，以及默认url前缀方便我们本地跨域代理使用
const myAxios = axios.create({
    baseURL: '/hjf',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
});
console.log(notification)

myAxios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
myAxios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    notification.success({
        message: `请求成功`,
        description: 11,
    });
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
//这里呢会拿错误的返回，当然这个是接口报错的编码返回，要是后端自己定义的错误返回这里是接收不道德，需要在上方成功的那里进行操作。
    notification.info({
        message: `请求失败`,
        description: 11,
    });
//注意这个routes是我们定义路由结构以及用createBrowserRouter创建的路由实列，里面包含全部的路由方法，这个不是hooks，不需要在组件里使用。我用的是v6版本的路由
    routes.navigate('/s')
//也可以用window的自带属性进行跳转
    // window.location.href='/s'
    return Promise.reject(error);
});
export default myAxios