@jiangqiang1996/easy-fetch v1.0.2

easy-fetch

基于fetch封装的请求工具，支持请求拦截和响应拦截等基础配置，拥有过滤重复请求的功能。

安装步骤

npm install @jiangqiang1996/easy-fetch

使用步骤

1. 创建一个实例，并配置全局参数，默认请求成功的code为200，可以在此处重新定义，最好全局均使用该实例进行请求

import FetchService from "@jiangqiang1996/easy-fetch/dist";
const service = fetchService.create({
    baseURL: "http://localhost:8080",
    headers: {'Content-Type': 'application/json'},
    timeout: 60000
});

2. 对实例设置拦截器：

service.requestInterceptor = (config) => {
    // 在发送请求之前做些什么 token
    if (Session.get('token')) {
        config.headers = {
            'Authorization': `${Session.get('token')}`
        }
    }
    return config;
}
service.responseInterceptor = (res) => {
    if (res?.code !== 200) {
        // `token` 过期或者账号已在别处登录
        if (res.code === 401) {
            Session.clear(); // 清除浏览器全部临时缓存
            window.location.href = '/'; // 去登录页
            ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
                .then(() => {
                })
                .catch(() => {
                });
        }
        ElMessage.error(res.message);
        //如果是需要判定为请求失败，这里必须是reject
        return Promise.reject(res);
    } else {
        return res;
    }
}

service.responseErrorInterceptor = (reason) => {
    // 对响应错误做点什么
    ElMessage.error(reason);
    return Promise.reject(reason);
}

3. 使用该实例 可传入泛型参数，拿到的响应结果即可自动转换为对应类型

logIn: (data: any) => {
    return service.post<string>( {
        url: '/admin/user/login',
        data,
    });
}
userInfo: (params) => {
    return service.get<UserInfo>( {
        url: '/admin/user/userInfo',
        params:params
    });
}