request-scheduler
There are cases where you may want to execute only the last requests that the users has triggered.
Usually, in order to do that, you should implement some kind of system to
assign an AbortController.signal
to fetch
or axios
in order to delete
the flying request and execute the latest one that user has just triggered.
This may take you a few time in order to implement, test and write a bit of documentation.
So this is likely what you'd have done in your project. This is a package that allows you to control the flow of the request without all that overhead.
Table of contents
Dependencies
This library expect AbortController
to exists if you use it in the browser.
If you're targeting IE or Samsung Browser, please make sure you have a polifill.
Install
npm i request-scheduler
or
yarn add request-scheduler
Usage
import Scheduler from 'request-scheduler'
import debounce from 'lodash/fp/debounce'
const fetchData = Scheduler((signal, search) => fetch('/api/v1/feed', {
body: JSON.stringify({ search })
signal
}))
const DEBOUNCE_DELAY = 300
document.getElementById('searchbox')
.addEventListener(
'input',
debounce(DEBOUNCE_DELAY, e => {
const value = e.target.value;
fetchData(value);
})
)
In the above example we are catching every single change in the input text, which is a search box used by the user to filter the data he's watching. Thanks to the scheduler, we are canceling every request "on the air" when the user trigger a change.
API
Scheduler
The scheduler accept a function that will be executed and then canceled if another call to the function has been made.
const fetchDataConsistently = Scheduler(fetchDataApiCall)
// ...
fetchDataConsistently()
Parameters
- TaskFunction: The function you want to execute and eventually cancel.
Returns
Returns a new function that will call and eventually cancel your TaskFunction. This function will return the result returned from TaskFunction.
TaskFunction
The function you want to be execute
const taskFunction = (signal, ...params) => {
// ...
}
Parameters
-
signal: This is the signal from the
AbortController
. You must use it if you want request-scheduler to be able to cancel your task execution. - ...params: The params that will be passed to the scheduled function.
Return
You can return whatever you want. The returned value will be passed directly to the caller of the scheduled task wrapped with the scheduler.
Why you should use it
This approach allows you to:
- save network traffic
- keep your UI consistent with your data
Sometimes, when two idetical request are triggered, the lastest could be faster than the first one to resolve. This causes an inconsistency in the UI because the user set a certain filter but the result of the page in not what the user expected.
Examples
Simple data fetching
import Scheduler from 'request-scheduler'
const fetchFeed = ({ ...options }) =>
fetch(FEED_URL, { ...options }).then(res => res.json())
const consistentFetchFeed = Scheduler(signal =>
fetchFeed({
signal
})
)
// ... In your UI ...
const data = await consistentFetchFeed()
Data fetching with parameters
import Scheduler from 'request-scheduler'
const fetchDataByFreeTextSearch = (freeTextSearch, { ...options }) =>
fetch(FEED_URL, {
...options,
body: JSON.stringify({
freeTextSearch
})
}).then(res => res.json())
const consistentFetchFeed = Scheduler((signal, freeTextSearch) =>
fetchFeed(freeTextSearch, {
signal
})
)
// ... In your UI ...
const data = await consistentFetchFeed('Text')
Inspiration
This little utility was inspired by this great article from Sébastien Lorber: https://sebastienlorber.com/handling-api-request-race-conditions-in-react