Skip to content
Advertisement

Abort a JS fetch() after request is sent and before the wait/download time

My problem:

I am currently trying to send several fetch() requests to a url without having to wait for the server’s response.

The exact use case is to build a small chrome extension that increase a counter on an external server (which I do not have control on) that increments on GET requests.

But, for the sake of UX, I would want to do this as quickly as possible.

What I tried :

My first try was to cancel the fetch after 100 millisec.

This works OK with a good connection and quick computer but if I do not have both, the fetch() is aborted too soon : the request is never sent.

Here is the code I have so far :

    let controller = new AbortController();
    let timer = setTimeout(() => controller.abort(), 100);

    await fetch(url, {signal: controller.signal}).catch(err => {
    if (err.name === 'AbortError') {
      }
    });
    clearTimeout(timer);

Question:

Is there a way to know when a fetch has passed the “send request” part of the fetch so I can abort it right there ?

Advertisement

Answer

if you want to send a request but don’t need the body of the reply you should send using HEAD method, this instructs the server to just reply with the headers of the call and not the body, so you can check for a status or content type etc that is in the header package

send 10 requests as fast as possible then await the reponses

const pending=[];
for(let i=0;i<10:i++)
{
    pending.push(fetch(url, {method:"HEAD"});
}
for(const req of pending){
    const res = await req;
    //check for a 200 code or any other bodyless data
}

or if you really don’t care about the response as all there is no need to await the promise completion

for(let i=0;i<10:i++)
{
    fetch(url, {method:"HEAD"});
}

aborting is for when you want to terminate the call even if it hasn’t been sent

as mentions by @Bergi , if you just want to ping the url then you can use

navigator.sendBeacon(url) 

but this will send a post request giving you much less control of what you do with the request

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement