react + axios + nprogress + antd 的请求封装

1.安装

npm install --save nprogress
npm i axios

2. 配置

// config/nprogress.ts

import NProgress from "nprogress";
import "nprogress/nprogress.css";

NProgress.configure({
    // 动画方式
    easing: "ease",
    // 递增进度条的速度
    speed: 500,
    // 是否显示加载ico
    showSpinner: false,
    // 自动递增间隔
    trickleSpeed: 200,
    // 初始化时的最小百分比
    minimum: 0.3,
});

export default NProgress;

// api/index.ts

import axios, { AxiosInstance, AxiosError, AxiosResponse } from "axios";
import NProgress from "@/config/nprogress";
import { StateCode } from "./httpEnum/index";
import { message } from "antd";

const config = {
    baseURL: import.meta.env.VITE_BASE_URL,
    // baseURL: "https://mock.mengxuegu.com/mock/6655a6d3b462b81cb3916a1b/api",
    // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
    // 如果请求话费了超过 `timeout` 的时间，请求将被中断
    timeout: 6000,
    // 表示跨域请求时是否需要使用凭证
    withCredentials: true,
};

let service: AxiosInstance = axios.create(config);

// 请求拦截器
service.interceptors.request.use(
    (config: any) => {
        // 请求时开启进度条
        NProgress.start();
        return config;
    },
    (error: AxiosError) => {
        NProgress.done();
        return Promise.reject(error);
    },
);

// 响应拦截器
service.interceptors.response.use(
    (response: AxiosResponse) => {
        NProgress.done();
        const { data } = response;
        if (data.code !== StateCode.SUCCESS) {
            message.error(data.msg);
            return Promise.reject(data);
        }
        return response;
    },
    (error: AxiosError) => {
        NProgress.done();
        const { message: msgError } = error;
        if (msgError) {
            message.error(msgError);
        }
        return Promise.reject(error);
    },
);

// get请求
export function GET(url: string, params?: any) {
    return service.get(url, { params });
}

// post请求
export function POST(url: string, data?: any) {
    return service.post(url, data);
}