一個防止你屢次調用接口的小輪子

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…