2

I have 3 api calls on application load (componentDidMount).

When I reload the page or open the new tab, all the api calls are made but on duplicating the tab only one of them is fired.

How do I trigger all the api calls on page duplication

Note: Browser: chrome.

priyanshu sinha
  • 595
  • 6
  • 14
  • 4
    Can you provide minimal [reproducible](https://stackoverflow.com/help/minimal-reproducible-example) example? – Gokulakannan T Sep 21 '20 at 05:10
  • Maybe you have some if condition before your request. Something like if(cookies.yourSavedVariable){ doRequest() } first page makes your condition true and the request isn't executed – Dmitriy Sakhno Sep 24 '20 at 15:00
  • If the requests are the exact same, then chrome might chose to use cached responses instead of making new requests. That could be why you're not seeing any network activity. – Olian04 Sep 25 '20 at 11:58
  • This should give you some hints to explore: https://stackoverflow.com/questions/28752524/uniquely-identify-a-duplicated-chrome-tab – Harshay Buradkar Sep 26 '20 at 17:31

1 Answers1

0

use Memopromise tools its an effective tool to handle asynchronous processes.

class MemoPromise {

 constructor(getPromise) {

   this.cache = {};

   this.getPromise = getPromise;

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

 }

 request({ uniqueKey, ...rest }) {

   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, I 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.

see execution code

const memoPromise = new MemoPromise(fn);

// invocation

const { request } = memoPromise;

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

// not required now

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

after integrating the Memopromise class your browser you might not be getting face any problem with your API requests. it deals effectively with your duplicate requests.

Monu Rohilla
  • 1,311
  • 5
  • 20