Angular Async HTTP requests not being send asynchronously

In your example you're requesting the same resource multiple times.

Chrome caches the response and uses a cache locking mechanism that checks the cache before sending the next request for the same resource.

The cache implements a single writer - multiple reader lock so that only one network request for the same resource is in flight at any given time.

Note that the existence of the cache lock means that no bandwidth is wasted re-fetching the same resource simultaneously. On the other hand, it forces requests to wait until a previous request finishes downloading a resource (the Writer) before they can start reading from it, which is particularly troublesome for long lived requests. Simply bypassing the cache for subsequent requests is not a viable solution as it will introduce consistency problems when a renderer experiences the effect of going back in time, as in receiving a version of the resource that is older than a version that it already received (but which skipped the browser cache).

https://www.chromium.org/developers/design-documents/network-stack/http-cache

You should see the requests being send simultaneously if you disable the cache in the developer tools.

You could also add some unique number to the query string of every url:

this.TEMP_URL + '?unique=<yourUniqueNumber>'

Your code is fine, the problem comes directly from Chrome. By inspecting the requests you can see that they are stalled / queued. If you do the same inspection in another browser (Firefox), you will see that the requests are made in asynchronous way without being queued.

Queued or Stalled Requests

Too many requests are being made on a single domain. On HTTP/1.0 or HTTP/1.1 connections, Chrome allows a maximum of six simultaneous TCP connections per host.

Bear in mind that being behind the proxy will lower the number of maximum simultaneous requests - this means that you will probably get stalled requests even with two requests.

The bad thing is that you won't be able to fix this by editing your Angular code. The possible fixes only include network setting modifications:

  • Implement domain sharding if you must use HTTP/1.0 or HTTP/1.1
  • Use HTTP/2. Don't use domain sharding with HTTP/2.
  • Remove or defer unnecessary requests so that critical requests can download earlier

Tags:

Angular

Angular Httpclient

Related

When I try to apply a certain git stash in VS2019, I get an error saying there are uncommitted changes (there aren't) and only one file is applied Efficiently find Unique triplets of three char vectors in MATLAB .NET Core Httpclient works but .Net Framework 4.7.2 httpclient doesn't Compiler bug with overloaded function What prevents the usage of a function argument as hidden pointer? Why does std::accumulate generate 705032704 as output instead of the sum of the elements in the vector? fill an array with arrays programmatically how to apply imgaug augmentation to tf.dataDataset in Tensorflow 2.0 Is there a way to trigger the .always coreLocation permission proactively in iOS13? Set breakpoint in imported python module in vs code How to upload files with graphql-java? ASP Net Core 2.2 add locker icon only to methods that require authorization - Swagger UI

Recent Posts