# easy-fetch

**Repository Path**: jiangqiang1996/easy-fetch

## Basic Information

- **Project Name**: easy-fetch
- **Description**: 基于fetch封装的请求工具，支持请求拦截和响应拦截等基础配置，拥有过滤重复请求的功能。
- **Primary Language**: TypeScript
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2023-05-20
- **Last Updated**: 2023-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

### 安装步骤
```
npm install @jiangqiang1996/easy-fetch
```

### 使用步骤

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

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

2. 对实例设置拦截器：

```JavaScript
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. 使用该实例 可传入泛型参数，拿到的响应结果即可自动转换为对应类型

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