@jiangqiang1996/easy-fetch
v1.0.2
Published
基于fetch封装的请求工具,支持请求拦截和响应拦截等基础配置,拥有过滤重复请求的功能。
Downloads
9
Readme
easy-fetch
基于fetch封装的请求工具,支持请求拦截和响应拦截等基础配置,拥有过滤重复请求的功能。
安装步骤
npm install @jiangqiang1996/easy-fetch
使用步骤
- 创建一个实例,并配置全局参数,默认请求成功的code为200,可以在此处重新定义,最好全局均使用该实例进行请求
import FetchService from "@jiangqiang1996/easy-fetch/dist";
const service = fetchService.create({
baseURL: "http://localhost:8080",
headers: {'Content-Type': 'application/json'},
timeout: 60000
});
- 对实例设置拦截器:
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);
}
- 使用该实例 可传入泛型参数,拿到的响应结果即可自动转换为对应类型
logIn: (data: any) => {
return service.post<string>( {
url: '/admin/user/login',
data,
});
}
userInfo: (params) => {
return service.get<UserInfo>( {
url: '/admin/user/userInfo',
params:params
});
}