一个防止你多次调用接口的小轮子

20,138 阅读2分钟

v2.0.0

文档

通过oneHandle可以创造出4中时效性的缓存

  • oneHandle(fn): 并发时效性
  • oneHandle(fn, true):内存时效性(例如刷新页面就没了)
  • oneHandle(fn, '本地缓存的key名', 'sessionStorage'): sessionStorage时效性
  • oneHandle(fn, '本地缓存的key名'): localStorage时效性

背景

之前听了同事的一个分享会,一个场景是父模块需要一个接口的数据,子模块也是需要这个接口的数据,如果子父模块都调这个接口的话,就浪费性能。当然也可以使用vuex,props这种传参。使用vuex的话就太笨重了,复用到别的项目麻烦就会出现,眼下props是最佳,不过有时候因为其他一些背景原因,得使用其他方法。

想到了一种通过队列的方式去写,后面请教了下老哥老姐们(大家的反应很热烈,鼓掌)

思考了下,还是选择队列这种,通过闭包将传进来的函数进行处理,并返回一个包装好的函数,函数之前怎么使用,包装好也是怎么使用,零污染

轮子简介

one-handle多次调用,响应一次,可开缓存

one-handle接受一个return Promise的函数生成一个闭包, 里面缓存了一个队列,当并发调用的时候,只会同时触发一次 函数,后面函数都会归到队列里面,等待第一次函数完成,当 然,第一个的Promise状态也会影响到队列里面的状态 (resolve还是reject)

使用方式

下载方式

npm i one-handle

yarn add one-handle

// 引入方式
// esm
import oneHandle from 'one-handle'
// script
<script src="https://unpkg.com/one-handle"></script>
window.oneHandle

使用方式

import oneHandle from 'one-handle'
function wait (time, data = 0) {
  return new Promise(resolve => {
    setTimeout(() => resolve(data), time)
  })
}
const $wait1 = oneHandle(wait)
$wait1(1000, 1).then(data => console.log('只触发一次', data)) // 只触发一次 1
$wait1(4000, 2).then(data => console.log('只触发一次', data)) // 只触发一次 1
$wait1(1, 3).then(data => console.log('只触发一次', data)) // 只触发一次 1
// 使用缓存,第二个参数传true
const $wait2 = oneHandle(wait, true)
// 第一次调用成功返回的值缓存起来,下次调用都会取这个值
$wait2(1, false).then(data => {
    console.log('缓存起来', data) // 缓存起来 false
    return $wait2(1, 50)
  })
    .then(data => console.log('使用缓存', data)) // 使用缓存 false

参数

/**
 * 多次调用,响应一次,可开缓存
 * 
 * @param {Function} fn 一个返回Promise的函数
 * @param {Boolean} cache 是否开启缓存
 * @param {*} context 上下文
 * @returns {Function} return Promise的闭包
 */
function oneHandle (fn, cache, context) {

剧终

github.com/hengshanMWC…