0

The fetch request in javascript:

async () => {
     try {
       const urls = [
         "http://localhost:3001/foo",
         "http://localhost:3001/foo",
         "http://localhost:3001/foo",
         "http://localhost:3001/foo",
       ];
   
       const requests = urls.map((url) => fetch(url));
       const responses = await Promise.all(requests);
       const errors = responses.filter((response) => !response.ok);
       }
}

I want the request to fire in parallel. But in dev tools in chrome this is shown:

enter image description here

Now when i disable the cache in devtools, it does work in parallel:

enter image description here

enter image description here

Confused on how to make it work without disabling the cache in devtools.

Thanks

Tim van Wageningen
  • 43
  • 7
  • Is it possible that the first one is just so fast? With the cache disabled there might also be small differences in when the requests kick off but because the whole thing takes longer the difference isn't noticable? Would be curious to see the absolute numbers. (how long do they take?) – Evert Jan 19 '23 at 01:12
  • The server is setup to take 2 sec per request and accepts requests in parallel. In the mean time i found a SO post describing the same problem. Requesting to the same enndpoint 4 times was just to test things out, so this should not be a problem i hope. Thanks! – Tim van Wageningen Jan 19 '23 at 08:45

1 Answers1

1

Ive found the answer in this post:

Chrome stalls when making multiple requests to same resource?

Apparently browsers try to cache requests to the same endpoint.

Tim van Wageningen
  • 43
  • 7