CODEWITHSUNDEEP
javascriptfetchabort
clemoun
clemoun

Reputation: 476

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 ?

Upvotes: 1

Views: 1919

Answers (2)

MikeT
MikeT

Reputation: 5500

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

Upvotes: 1

Bergi
Bergi

Reputation: 664346

I am trying to send several requests to a url without having to wait for the server's response.

That's what sendBeacon is meant to do, no need to involve fetch.

If that doesn't meet your requirements, you can still use fetch and simply not wait for the response - nothing forces you to use await.

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?

No. And aborting the request is not the right solution anyway. Notice that even when closing the connection only after the HTTP request is sent, the server might still notice that and will not process the request without a writable destination for the response.

Upvotes: 2

Related Questions