CODEWITHSUNDEEP
javascriptasync-awaitfetch-apilong-polling
user1781038
user1781038

Reputation: 111

Fetch API takes too much time to fetch request from server - Vanilla JavaScript

I finished working on an application which fetch data using Woocommerce API. application requirement is to fetch Woocommerce new order in realtime, so I use long polling technique to fetch orders and everything is working fine, until I realize fetch takes too much time to get data from server; also I use interval of 5 second to continuously check for new order. See image

https://postimg.cc/WtYWmznM

457 bytes of file takes 7 second to load

setInterval(async function(){
const response = await fetch('index2.php',{
method: "GET",
signal: signal,
headers : { 
  'Content-Type': 'text/html',
  'Accept': 'text/html'
}});
try {

const html = await response.text();
var parser = new DOMParser();
var doc = parser.parseFromString(html, "text/html");
var div = doc.getElementById('newOrder').innerHTML;
document.getElementById('newOrder').innerHTML = div;
}
catch(err) {
console.log('error: ', err);
}
}, 5000);

My question is why tiny file request takes 7s to fetch

Upvotes: 0

Views: 2352

Answers (1)

anon
anon

Reputation:

Your Code is perfectly fine. index2.php is the culprit to take time.

Just for demo, i have implemented the above code using a mock endpoint, it resolve in few mili seconds.

setInterval(async function () {
  const response = await fetch("https://demo9429942.mockable.io/mockapi", {
    method: "GET",
    headers: {
      "Content-Type": "text/html",
      Accept: "text/html"
    }
  });
  try {
    const html = await response.text();
    console.log(html);
  } catch (err) {
    console.log("error: ", err);
  }
}, 5000);

Upvotes: 2

Related Questions