Angular Async HTTP 请求未异步发送答案

【问题标题】：Angular Async HTTP requests not being send asynchronouslyAngular Async HTTP 请求未异步发送
【发布时间】：2019-08-06 14:03:38
【问题描述】：

基本上我的问题是 - 我有 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];
            });
  };

【问题讨论】：

如果将async 关键字添加到ngOnInit() 会发生什么？
@LeBavarois 结果相同
@Liam 这些是应用生命周期内唯一发送的 HTTP 请求
@Liam 更新了图片以反映页面加载时的所有事件
如果您尝试改用 mergeMap() 会怎样？ stackblitz.com/edit/angular-mrr4ef

标签： angular angular-httpclient

【解决方案1】：

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

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

缓存实现了单写-多读锁，这样任何时候都只有一个对同一资源的网络请求在进行中给定的时间。

注意缓存锁的存在意味着没有带宽浪费了同时重新获取相同的资源。在另一手，它强制请求等到前一个请求完成在开始阅读之前下载资源（Writer）它，这对于长期存在的请求特别麻烦。简单地为后续请求绕过缓存不是一个可行的解决方案因为它会在渲染器遇到时引入一致性问题回到过去的效果，就像收到一个版本的比它已经收到的版本旧的资源（但是它跳过了浏览器缓存）。

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

如果您在开发者工具中禁用缓存，您应该会看到同时发送的请求。

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

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

【讨论】：

【解决方案2】：

您的代码很好，问题直接来自 Chrome。通过检查请求，您可以看到它们被停止/排队。如果您在另一个浏览器 (Firefox) 中进行相同的检查，您将看到请求是以异步方式发出的，没有排队。

Queued or Stalled Requests

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

请记住，使用代理会降低最大同时请求的数量 - 这意味着即使有两个请求，您也可能会收到停滞的请求。

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

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

【讨论】：

谢谢 Dino - 刚刚在 Firefox 和 IE 上试过，证实了你所说的。