Angular Async HTTP requests not being send asynchronously

Question

Essentially my problem is - I have 6 different endpoints that return different numbers - I want to be able to send 6 requests asynchronously but using the chrome tools I see that they run sequentially not asynchronously.

  ngOnInit() {
    private readonly TEMP_URL: string = 'https://www.random.org/integers/?num=1&min=1&max=100000&col=1&base=10&format=plain&rnd=new';
    const result1 = this.http.get<Number>(this.TEMP_URL);
    const result2 = this.http.get<Number>(this.TEMP_URL);
    const result3 = this.http.get<Number>(this.TEMP_URL);
    const result4 = this.http.get<Number>(this.TEMP_URL);
    const result5 = this.http.get<Number>(this.TEMP_URL);
    const result6 = this.http.get<Number>(this.TEMP_URL);
    const result7 = this.http.get<Number>(this.TEMP_URL);


    forkJoin(result1,result2,result3,result4,result5,result6,result7).subscribe(results  => {
                    this.retVal0= results[0];
                    this.retVal1 = results[1];
                    this.retVal2 = results[2];
                    this.retVal3= results[3];
                    this.retVal4= results[4];
                    this.retVal5= results[5];
                    this.retVal6= results[6];
                    this.retVal7= results[7];
            });
  };

Answer 1

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