# http-optimize

> 防止重复网络请求、本地缓存

Latest version **0.0.8** (published 2021-02-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install http-optimize
pnpm add http-optimize
yarn add http-optimize
bun add http-optimize
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2021-02-19 |
| First published | 2021-02-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 20.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | daes |
| Maintainers | daes |
| Keywords | typescript |

## Links

- npm: https://www.npmjs.com/package/http-optimize
- Repository: https://github.com/hzs0623/http-optimize
- Homepage: https://github.com/hzs0623/http-optimize#readme
- Issues: https://github.com/hzs0623/http-optimize/issues
- npm.io page: https://npm.io/package/http-optimize

## Dependencies (5)

- [ts-loader](https://npm.io/package/ts-loader.md) ^8.0.14
- [typescript](https://npm.io/package/typescript.md) ^4.1.3
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.7.3
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.7.0
- [uglifyjs-webpack-plugin](https://npm.io/package/uglifyjs-webpack-plugin.md) ^2.2.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.0.8 (latest) — 2021-02-19
- 0.0.7 — 2021-02-19
- 0.0.6 — 2021-02-15
- 0.0.5 — 2021-02-15
- 0.0.4 — 2021-02-11
- 0.0.3 — 2021-02-01
- 0.0.2 — 2021-02-01
- 0.0.1 — 2021-02-01

## README

## http-optimize 

防止重复网络请求，前端本地缓存数据

![issues](https://img.shields.io/github/issues/hzs0623/http-optimize) ![license](https://img.shields.io/github/license/hzs0623/http-optimize) ![twitter](https://img.shields.io/twitter/url?url=https%3A%2F%2Fgithub.com%2Fhzs0623%2Fhttp-optimize)


## 前言

在开发中，经常会遇到接口重复请求导致的各种问题例如：

1. 对于重复的**get**请求，会导致页面更新多次，发生页面抖动的现象，影响用户体验。
2. 对于重复的**post**请求，会导致在服务端生成两次记录（例如生成两条订单记录）。
3. 如果当前页面请求还未响应完成，就切换到了下一个路由，那么这些请求直到响应返回才会中止。


## 安装

#### npm

```sh
#最新版本
$ npm install http-optimize
```

#### yarn

```sh
#最新版本
$ yarn add http-optimize 
```



## 全局API

#### getRequest

返回一个请求实例。应用发送请求实例。

```js
import { getRequest } from 'http-optimize'
import axios from 'axios'; // 自行安装

const http = getRequest(axios);

```

##### 参数

该函数接受一个选项对象作为第二个参数：

```js
...
const http = getRequest(axios, {
  log: true, // 开启控制台打印
  env: 'dev', // 环境变量 线上环境不打印
  responseCache: data => {  // 本地缓存响应拦截器
   // data 本地缓存数据  可以做一些操作
    return data;  
  },
});

```

#### HttpResponse

返回响应数据，一个普通对象。

##### 参数

该函数接受一个选项对象作为第一个参数：

> 这里引入axios来进行演示

```js
import axios from 'axios'; 
import { HttpResponse } from 'http-optimize';  // 引入

// 响应拦截器
axios.interceptors.response.use(response => {
    return HttpResponse(response);  // 返回响应数据
  }
）

```

#### httpError

该函数接受响应请求错误数据。参数为错误数据

> 在响应请求错误时执行

```js
...
import { httpError } from 'http-optimize';  // 引入

// 响应拦截器
service.interceptors.response.use(
  _ => {
   ...
  },
  error => {
    httpError(error);  // 响应处理异常
  }
）
```

## Demo

```js
import axios from 'axios';
import { getRequest, HttpResponse, httpError  } from 'http-optimize';   // 1. 导入

// 响应拦截器
axios.interceptors.response.use(
  response => {
    return HttpResponse(response);  // 2. 响应拦截
  },
  error => {
    httpError(error);  // 3. 响应处理异常
  }
）

export default getRequest(axios); // 4. 导出请求
```

## 选项

### 本地缓存数据配置 **cache**

> 数据保存到本地的localStorage里， key值`HTTP_CACHE_DATA`

##### 参数

**cache** 

- **类型**： `Object | Boolean`

- **详细**：

  传递值为true，默认开启缓存5分钟。

  ```js
  import http from './axios'; // 导入请求实例；
  
  export function queryInitData(params) {
      return http({
        url: '/api/xxx/xxx', 
        method: 'get',  
        cache: true // 默认开启5分钟
      })
    },
  ```

  选项对象时，可以传递选项：

  > **h:**    小时
  >
  > **m**     分钟

  ```js
  import http from './axios'; 
  
  export function queryInitData(params) {
      return http({
        url: '/api/xxx/xxx', 
        method: 'get',  
        cache: {
          m: 3   // 缓存三分钟
        }
      })
    },
   
     /**
     *  cache: {
     *   h: 2       =>  缓存两个小时
     *   m: 5       =>  缓存5分钟
     *  }
     **/
   
  ```

**cancelRepeat**

- **类型**：`Boolean`

- **详细**：

  当前请求可以重复发送。值为`true`在上一个请求还没有回来时，下一个请求也可以开启

  ```js
  import http from './axios'; 
  
  export function queryInitData(params) {
      return http({
        url: '/api/xxx/xxx', 
        method: 'get', 
        cancelRepeat: true // 当前请求可以发送重复网络请求
      })
    },
  ```

  

### 更新

1. localStorage存入不进去，存入到sessionStorage里。 
2. 每次写入数据前，清理过期时间的数据

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