Skip to content

Commit

Permalink
feat: - 发布第一版,具备基本功能
Browse files Browse the repository at this point in the history
  • Loading branch information
唐道勇 authored and 唐道勇 committed Apr 12, 2022
1 parent 6a28872 commit ad8556c
Show file tree
Hide file tree
Showing 10 changed files with 216 additions and 200 deletions.
2 changes: 1 addition & 1 deletion .env
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# 格式 等号前后没有空格 字符串无需加引号
VITE_APP_BASE_API=/dev-api
VITE_APP_BASE_HOST=https://test.openalpha.cn/open
VITE_APP_BASE_HOST=https://test.openalpha.cn/support-api/bigV
# build time
VITE_APP_BUILD_TIME=build time
105 changes: 41 additions & 64 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,94 +2,71 @@
* @Author: matiastang
* @Date: 2021-12-13 10:12:56
* @LastEditors: matiastang
* @LastEditTime: 2022-04-11 15:25:05
* @LastEditTime: 2022-04-12 19:11:35
* @FilePath: /matias-axios-throttle/README.md
* @Description: datumwealth-vue-components
-->
# matias-axios-throttle

## 说明

该项目为`axios`状态库的本地持久化项目
该项目为基于`axios`的一个接口节流功能,当调用一个请求后,在该请求未返回时再次调用了相同接口,如果参数相同则将复用上一个请求的结果,但两个调用接口的回调都将收到请求的结果。一个常见的应用常见是,不同组件里面封装调用了相同接口,组件又在同一个页面中渲染

## 安装与使用

1. 安装matias-pinia-persisted-state
1. 安装matias-axios-throttle

* `pnpm`导入
> $ pnpm add -D matias-pinia-persisted-state
> $ pnpm add -D matias-axios-throttle
* `yarn`导入
> $ yarn add -D matias-pinia-persisted-state
> $ yarn add -D matias-axios-throttle
* `npm`导入
> $ npm install -D matias-pinia-persisted-state
2. 引用

```ts
// main.ts
import { createPersistedState, PERSISTED_STATE_KEY } from '@/pinia/piniaPersistedState'

// pinia
const pinia = createPinia()
pinia.use(
createPersistedState({
key: 'pinia-state',
})
)

app.use(pinia)

```
* `PERSISTED_STATE_KEY`为本地持久化的`key`.默认是`pinia-state`可以在`createPersistedState`方法中传递自定义的`key`
> $ npm install -D matias-axios-throttle
2. 使用

`state`类型这种**必须**要包含`stateName`字段,用于命名本地缓存的`key`

* 仅需要用`requestThrottle`替换掉最后发起请求的方法。
```ts
import { defineStore } from 'pinia'

interface State {
stateName: string
}
import {
requestThrottle,
abortAll,
abortRequestTasks,
keepRequestTasks,
getRequestUrls,
} from '../throttle/index'

/**
* 节流请求
* @param httpAxios axios实例,将用该实例发起请求
* @param options 请求配置,类型同axios
* @returns promise
*/
requestThrottle(httpAxios, requestConfig)
.then((response) => {
console.log('请求成功')
})
.catch((err) => {
console.log('请求失败')
})

export const useTestStore = defineStore('pinia/test', {
state: (): State => ({
stateName: 'test',
}),
})
```
1. 使用`requestThrottle`发起请求
2. 开放几个操作任务的方法:

* `abortAll`取消全部请求
* `getRequestUrls`获取当前请求的所有地址
* `abortRequestTasks`取消指定的请求
* `keepRequestTasks`保留指定请求,其他全部移除

**注意**`abortRequestTasks``keepRequestTasks`的参数都是`url`

**注意**两次相同`requestThrottle`返回的的结果顺序和调用顺序是相反的。

## 版本

### 0.1.7

1. `state`没有`stateName`属性添加提示。

### 0.1.6

* 开启代码压缩

### 0.1.5

* 目录结构调整

### 0.1.4

* 更新类型文件导出

### 0.1.3

* 更新`package.json`的导出目录

### 0.1.2

* 更新目录结构及名称

### 0.1.1

* 添加类型声明文件
* 更新说明文档

### 0.1.0

* 实现基本的本地持久化功能
* 实现基本功能
11 changes: 6 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "matias-pinia-persisted-state",
"version": "0.1.7",
"description": "pinia状态持久化",
"name": "matias-axios-throttle",
"version": "0.1.1",
"description": "基于`axios`的一个接口节流功能",
"main": "./dist/index.umd.js",
"files": [
"dist"
Expand All @@ -16,15 +16,16 @@
},
"keywords": [
"matias",
"matiastang",
"西筹",
"datumwealth",
"matias-pinia-persisted-state"
"matias-axios-throttle"
],
"scripts": {
"dev": "vite",
"ts:build": "tsc --build src/throttle/tsconfig.json",
"build": "vite --config vite.build.config.ts build --mode production",
"cp:type": "cp src/throttle/buildTypes/index.d.ts dist",
"cp:type": "cp src/throttle/buildTypes/index.d.ts dist && cp src/throttle/buildTypes/throttle.d.ts dist && cp src/throttle/buildTypes/task.d.ts dist",
"plugin:build": "pnpm run ts:build && pnpm run build && pnpm run cp:type",
"push:npm:package": "gulp versionPatch && gulp npmPackagePush",
"plugin:build:push:npm:package": "pnpm run plugin:build && pnpm run push:npm:package"
Expand Down
11 changes: 9 additions & 2 deletions src/request/request.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,20 @@
* @Author: matiastang
* @Date: 2021-11-11 18:55:21
* @LastEditors: matiastang
* @LastEditTime: 2022-04-11 14:55:56
* @LastEditTime: 2022-04-12 18:58:52
* @FilePath: /matias-axios-throttle/src/request/request.ts
* @Description: axios简单封装
*/
import axios, { AxiosRequestConfig } from 'axios'
import initInstance from './axiosInterceptors'
import requestThrottle from '../throttle'
// import { requestThrottle } from '../throttle/index'
import {
requestThrottle,
abortAll,
abortRequestTasks,
keepRequestTasks,
getRequestUrls,
} from '../throttle/index'
/**
* 失败返回类型
*/
Expand Down
95 changes: 6 additions & 89 deletions src/throttle/index.ts
Original file line number Diff line number Diff line change
@@ -1,93 +1,10 @@
/*
* @Author: matiastang
* @Date: 2021-11-11 18:55:21
* @Date: 2022-04-12 18:16:59
* @LastEditors: matiastang
* @LastEditTime: 2021-12-08 19:04:50
* @FilePath: /datumwealth-openalpha-front/src/common/request/requestThrottle.ts
* @Description:
* @LastEditTime: 2022-04-12 18:58:48
* @FilePath: /matias-axios-throttle/src/throttle/index.ts
* @Description: 导出
*/
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import { getObjectHash } from './util'
import { addTask, sameTask, removeTask } from './task'

/**
* 发送请求
* @param {Object} options 可以包含uni.request中的所有非Funciton的参数
*/
function requestThrottle(httpAxios: AxiosInstance, options: AxiosRequestConfig) {
const requestHash = getObjectHash({
data: options.data,
params: options.params,
baseURL: options.baseURL,
url: options.url,
method: options.method,
})
return new Promise(
(resolve: (value: AxiosResponse<any, any>) => void, reject: (reason?: any) => void) => {
const task = sameTask(requestHash)
if (task) {
// 重复请求
// 添加回调
task.relevance.push({
resolve,
reject,
})
return
}
const CancelToken = axios.CancelToken
const source = CancelToken.source()
addTask(requestHash, options, source)
httpAxios
.request({
...options,
cancelToken: source.token,
})
.then((res) => {
_sendSuccess(requestHash, res)
resolve(res)
})
.catch((err) => {
_sendFail(requestHash, err)
reject(err)
})
}
)
}

/**
* 请求成功处理
* @param {Object} hash
* @param {Object} res
*/
function _sendSuccess(hash: string, res: AxiosResponse<any, any>) {
const task = sameTask(hash, true)
if (task === null) {
console.warn(`success未找到${hash}`)
return
}
for (const relevance of task.relevance) {
// 触发成功回调
relevance.resolve(res)
}
removeTask(hash)
}

/**
* 请求失败处理
* @param {Object} hash
* @param {Object} err
*/
function _sendFail(hash: string, err: any) {
const task = sameTask(hash, true)
if (task === null) {
console.warn(`error未找到${hash}`)
return
}
for (const relevance of task.relevance) {
// 触发失败回调
relevance.reject(err)
}
removeTask(hash)
}

export default requestThrottle
export * from './throttle'
export { abortAll, abortRequestTasks, keepRequestTasks, getRequestUrls } from './task'
Loading

0 comments on commit ad8556c

Please sign in to comment.