How to Avoid Duplicate API Requests?

Mar 17, 2020 5:43:00 PM

duplicate API request

Duplicate API requests are common and if dealt wisely,  can help developers in creating a seamless user experience. In a scalable application, duplicate API requests can be problematic to the resources on a server, can affect the cost, and can interrupt performance.

That is why it is important to pay attention to API calls and ensure that no duplicate request is passed to the API. The later segment discusses some of the probable reasons that can lead to duplicate API request issues and ways to overcome the problem. 

Duplicate API Requests: Possible Reasons

There can be different scenarios where an API is called multiple times to get the data. For example, 

  • When a user taps on a button multiple times before it gets disabled.

  • At times, one API response causes another API request to execute. Let’s understand this with an analogy. There are several books with the same author details. As the details of the book get loaded, another requests to load the author's details is passed consequently. In this scenario, the request for multiple book details can hit the author's details API (while one is already under execution).

  • API requests on scroll events can hit an API multiple times as the scroll event triggers rapidly. 

image 1

 Same API called multiple times

Fixing Duplicate API Request Problem

While there can be several ways to fix this problem, the one that we share here leverages promise behaviour, which requires minimal changes to the codebase. Let’s understand how this solution works. 

‘Promise’ is an effective tool to handle asynchronous processes. Here is an implementation of promises to handle duplicate API requests.

class MemoPromise {

 constructor(getPromise) {

   this.cache = {};

   this.getPromise = getPromise;

   this.request = this.request.bind(this);


 request({ uniqueKey, }) {

   if (!uniqueKey) {

     return Promise.reject(new Error('Unique key not passed'));


   if (this.cache[uniqueKey]) {

     return this.cache[uniqueKey];


   const promise = this.getPromise(rest);

   this.cache[uniqueKey] = promise

     .then((res) => {

       delete this.cache[uniqueKey];

       return res;


     .catch((err) => {

       delete this.cache[uniqueKey];

       throw err;


   return this.cache[uniqueKey];



In the above example, we have created a MemoPromise class whose instantiated object can memorize the promises returned by the passed function in the constructor till the time they are not resolved or rejected. The aforementioned implementation can be executed as below: 

const memoPromise = new MemoPromise(fn);

// invocation

const { request } = memoPromise;

request({ uniqueKey: url, apiType, url, payload });

// not required now

// fn({ apiType, url, payload });

`fn` is the method under which API request is defined and it returns the request made as a promise (which is default). Instead of calling `fn` each time now we will be calling the `request` method consisted of memoPromiseObj.

image 2No Duplicate API Requests

By integrating the MemoPromise class, it is possible to effectively deal with duplicate API requests. We hope this works with you as well.

For any query or discussion, you can initiate a conversation through the comments section below. 

Team Daffodil

Written by Team Daffodil

We equip smart companies with smarter solutions. Our all-round expertise in Web, Mobile and Cloud solutions has brought about a change in some of the top businesses, setting global milestones as we go.