Небольшое колесо, которое не позволяет вам вызывать интерфейс несколько раз

JavaScript

v2.0.0

Документация

4 чувствительных ко времени кеша могут быть созданы через oneHandle

  • oneHandle(fn): своевременность параллелизма
  • oneHandle(fn, true): своевременность памяти (например, обновите страницу, и она исчезнет)
  • oneHandle(fn, 'имя ключа локального кэша', 'sessionStorage'): своевременность sessionStorage
  • oneHandle(fn, 'имя ключа локального кэша'): своевременность localStorage

задний план

Я слушал сеанс обмена коллегой раньше. Один сценарий заключается в том, что родительскому модулю нужны данные интерфейса, а подмодулю также нужны данные этого интерфейса. Если и подмодуль, и родительский модуль вызывают этот интерфейс, это приведет к потере производительности. Конечно, вы также можете использовать vuex, props для передачи параметров. Использование vuex слишком громоздко, и будет проблематично повторно использовать его в других проектах.Сейчас лучше всего использовать props, но иногда приходится использовать другие методы из-за других фоновых причин.

Я придумал способ писать через очередь, а потом попросил совета у братьев и сестер (все откликнулись с энтузиазмом, аплодируют)

Подумав, я все равно выбираю очередь, обрабатываю входящую функцию через замыкание и возвращаю упакованную функцию, как использовать функцию раньше, как использовать пакет, нулевое загрязнение

Введение в колеса

one-handleВызывался несколько раз, ответил один раз и может открыть кеш

one-handle принимает функцию, которая возвращает Promise для создания замыкания, В нем есть кешированная очередь, и когда она вызывается одновременно, она будет запущена только один раз одновременно. функции, последние функции будут помещены в очередь, ожидая завершения первой функции, когда Конечно, состояние первого промиса также повлияет на состояние в очереди. (решить или отклонить)

Как использовать

Способ загрузки

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…

Категории