Question

本质上，我的问题是-我有6个不同的端点返回不同的数字-我希望能够异步发送6个请求，但是使用chrome工具，我发现它们不按顺序运行。

  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

您的代码很好，问题直接来自Chrome。通过检查请求，您可以看到它们已停止/排队。如果在另一个浏览器（Firefox）中进行相同的检查，您将看到请求是异步进行的，而无需排队。

Queued or Stalled Requests

在一个域上提出的请求过多。在HTTP / 1.0或HTTP / 1.1连接上， Chrome允许每个主机最多同时进行六个TCP连接。

请记住，在 proxy 之后，将减少最大同时请求数-这意味着即使有两个请求，您也可能会遇到停顿的请求。

不好的是，您将无法通过编辑Angular代码来解决此问题。可能的修复仅包括网络设置修改：

如果必须使用HTTP / 1.0或HTTP / 1.1，则实施域分片
使用HTTP / 2。不要在HTTP / 2中使用域分片。
删除或推迟不必要的请求，以便关键请求可以尽早下载

Answer 2

在您的示例中，您多次请求相同的资源。

Chrome缓存响应并使用缓存锁定机制，该机制会在发送下一个相同资源的请求之前检查缓存。

缓存实现单个写入器-多个读取器锁，以便   在任何情况下，只有一个网络请求同一资源   给定时间。

请注意，缓存锁的存在意味着没有带宽   浪费了同时重新获取相同资源的麻烦。在另一   手，它迫使请求等待，直到上一个请求完成   下载资源（作家）后才能开始阅读   它，对于长期存在的请求特别麻烦。只是   绕过缓存以获取后续请求不是可行的解决方案   因为当渲染器体验时会引入一致性问题   时光倒流的效果，例如收到   资源早于已收到的版本（但   跳过了浏览器缓存）。

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

如果在开发人员工具中禁用了缓存，则应该看到同时发送的请求。

您还可以在每个url的查询字符串中添加一些唯一的数字：

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

Angular Async HTTP请求未异步发送

2 个答案: