How to Restart fetch api request after aborting using AbortController

by

I am working on order taking an application for takeaways (using woocommerce API) where order will receive instantly. I created a simple dashboard where all orders displayed and get new order using fetch API with setinterval.

so when user clicks on order they receive on dashboard. a Model pop appears where user manages the order. but because of setinterval(for 5s) Model disappear, to solve of this problem, I use the technique to clear interval so when user clicks on an order interval cleared and won’t request further until user manage order on the Model box and press save button, on save i call setinterval function again

but in this technique, there is an issue, if setinterval is going to execute and user click on order and because fetch is already fired and all orders refreshed, Model Disappear. so I have to click order again (see picture) https://postimg.cc/H8267CGd

so then I use AbortController Api, it works exactly as i want.

AbortController to abort async fetch request, once i aborted fetch request it won’t start again and instead of giving error
telling operation aborted (Uncaught (in promise) DOMException: The operation was aborted).

so long story short, how can i restart fetch API request again with using AbortController

const controller = new AbortController();
const signal = controller.signal;

function gettingOrders(){

var refreshInterval = setInterval(async function(){

const response = await fetch('index.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);
  }

  gettingOrders();

  var sinterval = refreshInterval;
  sessionStorage.setItem("sinterval", sinterval);

  function abortFetching() {
  console.log('Now aborting');
  controller.abort();
  }

121 thoughts on “How to Restart fetch api request after aborting using AbortController”

  22. Pingback: keto strawberry shortcake

  53. Hmm it appears like your website ate my first comment (it was extremely long) so I guess I’ll just sum it up what I wrote and say,
    I’m thoroughly enjoying your blog. I as well am an aspiring
    blog writer but I’m still new to the whole thing.

    Do you have any tips and hints for rookie blog writers?

    I’d genuinely appreciate it.

    Reply

  56. I’m extremely inspired with your writing skills
    and also with the structure to your blog. Is this a paid subject or did you customize it
    yourself? Either way stay up the nice high quality writing, it’s uncommon to look
    a nice blog like this one today..

    Reply

  59. Hello there I am so thrilled I found your webpage, I really found
    you by mistake, while I was browsing on Digg for something else, Regardless I am here now and would just like to
    say thank you for a marvelous post and a all round enjoyable
    blog (I also love the theme/design), I don’t have time to look over it
    all at the moment but I have saved it and also included your RSS feeds, so when I have time I will be back
    to read a great deal more, Please do keep up the excellent jo.

    Reply

  64. It’s really a nice and helpful piece of information. I am happy that you just shared this useful information with us.
    Please keep us up to date like this. Thank you for sharing.

    Reply

  68. I know this if off topic but I’m looking into starting my own weblog and was curious what all is
    needed to get set up? I’m assuming having a blog like
    yours would cost a pretty penny? I’m not very web savvy
    so I’m not 100% sure. Any tips or advice would be greatly
    appreciated. Many thanks

    Reply
  86. Pingback: free gay chat and dating

  97. I’ve been surfing online more than 4 hours today, yet I never found any interesting article like
    yours. It’s pretty worth enough for me. Personally, if all webmasters and bloggers made good content as
    you did, the web will be a lot more useful than ever before.

    Reply

Leave a Comment