DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Luka Vidaković
Luka Vidaković

Posted on

takeLatest Promise util function

On frontend, you may have a piece of code that fires network requests very quickly, based on user interaction. Debouncing such actions becomes less and less a viable option because of user experience. Especially with advent of React.js Suspense which deals with this and many other things on a such fine low level. But what if you want to fix such behavior in just a few places, without being reliant on UI libraries. redux-saga has it's methods to battle race conditions but it's tightly related to redux actions. Native window.fetch with AbortController offers network request cancellation mechanism, but is not supported by the older browsers. Maybe there is more than just network requests you want to guard from race conditions?!

In most cases, it just boils down to how your code reacts to resolved promises.

Previously we mentioned an util function that enables cancellation of Promise's success chain. Let's just paste that code here for reference, as we will use it to construct our takeLatest(promise) util function:

const cancelable = (promise) => {
  let hasCancelled = false;

  return {
    promise: promise.then(v => {
      if (hasCancelled) {
        throw { isCancelled: true };
      }

      return v;
    }),
    cancel: () => hasCancelled = true
  }
};
Enter fullscreen mode Exit fullscreen mode

Now, we'll want to create another util function that'll keep track of the previously passed in promise, cancel it if it hasn't finished yet and replace with the new one:

const createTakeLatest = () => {
  let cancelablePromise = null;

  const takeLatest = promise => {
    if (cancelablePromise) {
      cancelablePromise.cancel();
      cancelablePromise = cancelable(promise);
    } else {
      cancelablePromise = cancelable(promise);
    }

    return cancelablePromise.promise;
  };

  return takeLatest;
};
Enter fullscreen mode Exit fullscreen mode

Now we can generate ourselves a tracker of sorts that receives promises, and allows only the last one to finish(if we have multiple concurrent request):

const takeLatest = createTakeLatest()
// imagine having fetchPage async function implemented to fetch a page from a server

for (let i = 0; i < 20; i++) {
  const request = fetch(`/api/someData?page=${i}`)
  takeLatest(request)
    .then(() => console.log('Page fetched'))
    .catch(error => {
      if (!error.isCancelled) {
        // handle only requests that haven't been cancelled
      } 
    })
} 
Enter fullscreen mode Exit fullscreen mode

In the example above, only the last request's handlers will be executed, all the rest will get cancelled and caught as errors with isCancelled flag set.

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post