如何在Angular 2中进行> 2个独立/并行http请求

Question

基本情况： 我正在使用 Angular CLI 构建的应用程序中构建一个表单。该表单具有三个选择框，其中包含一长串选项。这些选项是通过对服务器的 http 请求填充的。我在 ngOnInit 中调用了三个方法来发出这些 http 请求（参见下面的代码）。无论我按什么顺序调用它们，只有前两个请求完成。

最终控制台会为第三个请求显示以下错误：

HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://my-corporate-url:3001/db/depts?deptName=", ok: false, …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
status: 0
statusText: "Unknown Error"
url: "http://my-corporate-url:3001/db/depts?deptName="
ok: false
name: "HttpErrorResponse"
message: "Http failure response for http://my-corporate-url:3001/db/depts?deptName=: 0 Unknown Error"
error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
__proto__: HttpResponseBase

我可以“链接”三个按顺序调用的 http 请求，但我希望 http 服务可以在我构建的其他表单中重复使用，这些表单将具有相同的选择框输入元素。

是的，我已经阅读： 有一些 Stackoverflow 问题与此类似（尤其是 this question），但没有一个解决了只能发出 2 个 http 请求的特定问题。提到了使用 mergeMap 和 forkJoin，但它们似乎是为调用相同请求的数组而设计的。

我的代码：

发出请求的组件：

import { Component, OnInit } from '@angular/core';
import { NodeHTTPService } from '../node-http.service';

@Component({
  ...
})

export class NewServiceDeskGroupComponent implements OnInit {
  existingGroups;
  deptArray;
  locArray;
  group: string = "";
  dept: string = "";
  loc: string = "";

  constructor(private _nodeHTTPService: NodeHTTPService) { }

  ngOnInit() {
      this.queryGroupNames();
      this.queryBBB();
      this.queryDepts();
  }

  queryGroupNames() {
    console.log('begin querying for groups')
    this._nodeHTTPService.getSDMGroups().subscribe(
      data => {this.existingGroups = data},
      err => console.log(err),
      () => console.log('done loading groups')
    );
  }

  queryBBB() {
    console.log('begin querying for branches')
    this._nodeHTTPService.queryBranches(this.loc).subscribe(
      data => {this.locArray = data},
      err => console.log(err),
      () => console.log('done loading branches')
    );
  }

  queryDepts() {
    console.log('begin querying for departments')
    this._nodeHTTPService.getDepts(this.dept).subscribe(
      data => {this.deptArray = data},
      err => console.log(err),
      () => console.log('done loading departments')
    );
  }
}

我的 node-http.service.ts 文件：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type' : 'application/json' })
};

@Injectable({
  providedIn: 'root'
})

export class NodeHTTPService {
  constructor(private http: HttpClient) { }
  
  getSDMGroups() {
    let groups = this.http.get('http://my-corporate-url:3001/db/sdm-groups')
    return groups;  
  }

  queryBranches(i) {
    let bbbs = this.http.get(`http://my-corporate-url:3001/db/bbb-full-service?bbb=${i}`);
    return bbbs;
  }

  getDepts(i) {
    if (!i) { i = ''};
    let depts = this.http.get(`http://my-corporate-url:3001/db/depts?deptName=${i}`);
    return depts;
  }

}

我尝试了什么： 我尝试注释掉 ngOnInit 中调用的三个方法中的每一个，以查看其中一个是否出错。我也尝试过打乱三个方法调用的顺序。在每种情况下，浏览器都可以成功执行 3 个方法中的任何 2 个，但第 3 个永远不会完成。

有什么建议吗？谢谢！

Answer 1

您收到的错误看起来像是一个错误的请求。具体来说，我认为您正在尝试在没有必需的部门查询参数的情况下调用 departments 端点。 （如果不查看服务器端代码，这很难确定）

你的错误：

Http 失败响应 http://my-corporate-url:3001/db/depts?deptName=：0 未知错误

如果您在调用 departments 端点之前为 this.dept 设置了正确的值，您可以让它工作吗？

我还建议在服务器代码中设置断点，以查看部门的端点从客户端接收到什么。可能是您的服务器抛出异常，因为您立即尝试使用查询参数 deptName 执行某些操作，但它是空的，所以您的 api barfs。

请记住，在 JavaScript 中，空字符串 ('') 是一个虚假值。

因为您像这样一次调用所有端点：

  this.queryGroupNames();
  this.queryBBB();
  this.queryDepts();

如果前一个调用需要将数据传递给下一个调用，您需要将它们链接在一起。如果不是这样，而您只想一次执行所有请求，我建议使用Promise.all

Promise.all([
  this._nodeHTTPService.getSDMGroups(),
  this._nodeHTTPService.queryBranches(this.loc),
  this._nodeHTTPService.getDepts(this.dept)
]);