reuse-pending-promise

Reuses a promise by reference until it's settled (resolved or rejected). It helps ensure only one fetch is made at a time--preventing multiple simultaneous fetches for the same data.

It decorates the fn (a thennable) with a cache of pending promises. The cached promise is returned until it has been fulfilled.

1reusePendingPromise(fn[, options])

Install

1npm install reuse-pending-promise

Example usage:

1import { reusePendingPromise } = from 'reuse-pending-promise'
2
3let callCount = 0
4// A promise-returning function
5const MyFn = () => {
6  callCount++
7  return new Promise(resolve => {
8    // Wait 10 seconds before resolving
9    setTimeout(() => {
10      resolve(callCount)
11    }, 10 * 1000)
12  })
13}
14
15// Wrap the promise returning function
16const reusedMyFn = reusePendingPromise(MyFn)
17
18Promise
19  // Call the reused function 3 times in parallel
20  .all([reusedMyFn(), reusedMyFn(), reusedMyFn()])
21  .then(() => console.log(`callCount: ${callCount}`))
22  // now that the first promise has resolved...
23  .then(reusedMyFn)
24  .then(() => console.log(`callCount: ${callCount}`))
25
26// 10 seconds later, the initial three calls resolve but the `myFn` is only invoked once:
27// // callCount: 1
28
29// 20 seconds later, the last call will resolve, having invoked `myFn` a second time.
30// // callCount: 2

Using getCacheKey option for variations

The getCacheKey option can be used to cache variations based on the fn's arguments, similar to the resolver argument in lodash.memoize. By default the first argument is used as the cache key.

Here's an example where promises are re-used only if the lang and country arguments match:

1const fetchData = (lang, country) => fetch(`http://example.com/${country}/${lang}`)
2const getCacheKey = (lang, country) => `${lang}${country}`
3
4const reusedFetchData = reusePendingPromise(fetchData, { getCacheKey })
5// promise1 and promise2 will share the same promise returned by fetch,
6// since they share a cache key.
7const promise1 = reusedFetchData('en', 'canada')
8const promise2 = reusedFetchData('en', 'canada')
9// promise1 === promise2
10
11// promise3 will be a different cache key, thus will be a new promise for
12// a second second fetch call.
13const promise3 = reusedFetchData('fr', 'canada')
14// promise3 !== promise1

Additional examples are in the unit test

Contributing

Fork and create a PR.

License

This project is MIT licensed.