# @jiangqiang1996/easy-fetch

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

Latest version **1.0.2** (published 2023-06-04) · GPL-2.0 license · 0 weekly downloads

## Install

```sh
npm install @jiangqiang1996/easy-fetch
pnpm add @jiangqiang1996/easy-fetch
yarn add @jiangqiang1996/easy-fetch
bun add @jiangqiang1996/easy-fetch
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-06-04 |
| First published | 2023-05-20 |
| Weekly downloads | 0 |
| License | GPL-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 63.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jiangqiang |
| Maintainers | jiangqiang1996 |
| Keywords | fetch, 请求工具, 拦截器 |

## Links

- npm: https://www.npmjs.com/package/@jiangqiang1996/easy-fetch
- Repository: https://gitee.com/jiangqiang1996/easy-fetch
- npm.io page: https://npm.io/package/@jiangqiang1996/easy-fetch

## Dependencies (1)

- [qs](https://npm.io/package/qs.md) ^6.11.2

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2023-06-04
- 1.0.1 — 2023-06-04
- 1.0.0 — 2023-05-20

## 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
    });
}
```

---
_Source: https://npm.io/package/@jiangqiang1996/easy-fetch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._