0

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 ?

clemoun
  • 298
  • 3
  • 14

2 Answers2

2

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.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • Thanks for the response. I added some context in my original question. SendBeacon is a POST so that does not work for me. Just removing the await also does not work (for reasons I do not understand) because Chrome then awaits anyways... MikeT's response did the trick – clemoun Mar 31 '22 at 08:01
1

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

MikeT
  • 5,398
  • 3
  • 27
  • 43
  • Thanks a lot, this works perfectly ! method: "HEAD" + no await is exactly what I needed. For some reason, without method: "HEAD", the requests are sent one after the other. – clemoun Mar 31 '22 at 07:59