rokapi

📖 简介

✅ 可自定义底层请求的请求库，包括 请求重试、请求缓存、请求幂等、请求串行、请求并发，默认底层为fetch，可以使用 use 切换底层实现，见下面文档。

🎁 安装

npm install rokapi

pnpm install rokapi

yarn add rokapi

📚 文档

|名称 |描述|默认值| |:---|:---|:---| |request|默认请求函数|| |useRequestor|获取请求函数|| |createCacheRequestor|创建带有缓存的请求函数 ({key?,persist?,duration?,isValid?}),返回一个函数,可组合其他形式请求或默认请求|{duration:3600000}| |createIdemportentRequestor|创建幂等请求函数 (getKey)，返回一个函数,可组合其他形式请求或默认请求|false| |createParalleRequestor|创建可并发的请求函数 (maxCount)，返回一个函数,可组合其他形式请求或默认请求|4| |createRetryRequestor|创建可重试请求的函数 (maxCount, duration)，返回一个函数,可组合其他形式请求或默认请求|(5, 500)| |createSerialRequestor|创建可串行的请求函数，返回一个函数,可组合其他形式请求或默认请求|| |setRequestInterceptor|拦截请求函数|(config)=>config| |setResponseInterceptor|拦截响应函数|(config)=>config| |use|切换底层请求函数，默认底层是fetch，use(自己封装的请求函数)。见下面示例|| |requestControlls|关闭请求，可关闭单个请求或全部请求|| |combineRequestors|组合多个请求函数，返回一个函数,可组合其他形式请求或默认请求||

createCacheRequestor |属性|说明|默认值| |:---|:---|:---| |key|缓存键生成函数,可自定义函数，或默认使用hash|| |persist|是否持久化本地缓存,默认内存缓存,默认使用内存|false| |duration|缓存时长(毫秒)|3600000| |isValid|自定义缓存有效性校验函数||

返回值,详见案例使用

(baseRequestor?:Requestor)=>Requestor

createIdemportentRequestor |参数|说明|默认值| |:---|:---|:---| |getKey|选择将强求参数转为JSON字符串,或默认使用hash|false|

返回值,详见案例使用

(baseRequestor?:Requestor)=>Requestor

createParalleRequestor |参数|说明|默认值| |:---|:---|:---| |maxCount|最大并发数|4|

返回值,详见案例使用

(baseRequestor?:Requestor)=>Requestor

createRetryRequestor |参数|说明|默认值| |:---|:---|:---| |maxCount|最大重试次数|5| |duration|重试间隔时间(毫秒)|500|

返回值,详见案例使用

(baseRequestor?:Requestor)=>Requestor

requestControlls |属性|说明|参数| |:--|:---|:---| |cancel|关闭单个请求|cancelKey| |cancelAll|关闭所有请求||

combineRequestors |属性|说明|默认值| |:---|:---|:---| |requestor|请求api|| |...getRequestor|0个或多个可返回请求api的函数||

🚴 使用

import {useRequestor} from 'rokapi'
const requestor = useRequestor()
requestor.get('/api/v1/users',{
    responseType: 'json'
})

// 或者

import {request} from 'rokapi'

request({
    url: '/api/v1/users',
    method: 'GET',
    responseType: 'json'
})

😘 缓存请求

import {createCacheRequestor} from 'rokapi'
const requestor = createCacheRequestor({
    key?: (config: RequestOptions & { url: string }) => string;//缓存键生成函数,
    persist?: boolean;//是否持久化本地缓存,默认内存缓存
    duration?: number;//缓存时长(毫秒)
    isValid?: (key: string, config: RequestOptions) => boolean; //自定义缓存有效性校验函数
})()


//请求
requestor.get('/api/v1/users',{
    responseType: 'text'
}).then(res=>{
    console.log(res)
})

//测试缓存

setTimeout(()=>{
    requestor.get('/api/v1/users',{
        responseType: 'text'
    }).then(res=>{
        console.log(res)
    })
    requestor.get('/api/v1/users',{
        responseType: 'text'
    }).then(res=>{
        console.log(res)
    })
},1000)

😊 请求重试

import {createRetryRequestor} from 'rokapi'

const requestor = createRetryRequestor(4)()//设置最多重试次数
requestor.get('/api/v1/users',{
    responseType: 'text'
}).then(res=>{
    console.log(res)
})

😜 请求幂等

import {createIdempotentRequestor} from 'rokapi'
const requestor = createIdempotentRequestor(
    false //生成唯一键的方式，默认hash,true 则为请求的config 的字符串，JSON.stringify(config)
)()

requestor.get('/api/v1/users',{
    responseType: 'text'
}).then(res=>{
    console.log(res)
})

//测试幂等性
setTimeout(()=>{
    requestor.get('/api/v1/users',{
        responseType: 'text'
    }).then(res=>{
        console.log(res)
    })
},1000)

😰 请求并发

import {createParalleRequestor} from 'rokapi'

const requestor = createParalleRequestor(2)()//设置并发数

//测试并发
Promise.all([
    requestor.get('/api/v1/users',{}),
    requestor.get('/api/v1/users',{})
    requestor.get('/api/v1/users',{})
    requestor.get('/api/v1/users',{})
    requestor.get('/api/v1/users',{})
])

🚉 请求串行

import {createSerialRequestor} from 'rokapi'
const requestor = createSerialRequestor()()
//测试串行
request.get('http://127.0.0.1:4523/export/openapi/2?version=3.0')
request.get('http://127.0.0.1:4523/export/openapi/2?version=3.0')
request.get('http://127.0.0.1:4523/export/openapi/2?version=3.0')
request.get('http://127.0.0.1:4523/export/openapi/2?version=3.0')

🎒 组合使用

有两种方式，推荐使用 combineRequestors

1. 可自行组合使用，比如组合缓存和并发

import {useRequestor,createCacheRequestor,createParalleRequestor} from 'rokapi'
const requestor = useRequestor()
//缓存请求
const cacheRequestor=createCacheRequestor({duration:5*60*1000})(requestor)
//组合并发
const parallRequestor=createParalleRequestor(2)(cacheRequestor)
//测试
parallRequestor.get('http://127.0.0.1:4523/export/openapi/2?version=3.0')
parallRequestor.get('http://127.0.0.1:4523/export/openapi/2?version=3.0')
parallRequestor.get('http://127.0.0.1:4523/export/openapi/2?version=3.0')

2. 使用 combineRequestors

import {useRequestor,createCacheRequestor,createParalleRequestor,combineRequestors} from 'rokapi'

const requestor = useRequestor()
const caheParallRequestor = combineRequestors(
    requestor,
    createCacheRequest({duration:5*60*1000}),createParalleRequestor(2)
)
//测试
parallRequestor.get('http://127.0.0.1:4523/export/openapi/2?version=3.0')
parallRequestor.get('http://127.0.0.1:4523/export/openapi/2?version=3.0')
parallRequestor.get('http://127.0.0.1:4523/export/openapi/2?version=3.0')

💻 自定义底层请求

import axios from 'axios'
import type { AxiosRequestConfig, ResponseType } from 'axios'
import { use, useRequestor } from 'rokapi'

export const axiosAdapter: BaseRequestor = async (url, options) => {
    console.log('现在是axios 在执行')
    const { method, responseType, ...restOptions } = options;
    const axiosConfig: AxiosRequestConfig = {
        url,
        method: method as AxiosRequestConfig['method'],
        responseType: responseType as ResponseType,
        ...restOptions,
    }
    const response = await axios(axiosConfig);
    return response.data
}

use(axiosAdapter) //切换底层请求
const request = useRequestor() //使用自定义的底层请求

🚖 拦截器使用

import {useRequestor, setRequestInterceptor, setResponseInterceptor } from 'rokapi'

//拦截请求
setRequestInterceptor(async (config) => {
    config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
    return config
})
//拦截响应
setResponseInterceptor(async (res) => {
    return {...res, additionalData: 'added'}
})
'

🚫 关闭请求

request.get('http://127.0.0.1:4523/export/openapi/2?version=3.0', {
    cancelKey: 'key1'
})
request.get('http://127.0.0.1:4523/export/openapi/2?version=3.0', {
    cancelKey: 'key2'
})
setTimeout(() => {
    console.log(requestControlls.has('key1'))
    // requestControlls.cancel('key1')  关闭单个请求,
    requestControlls.cancelAll() //关闭所有请求
    console.log('取消了')
}, 100)