node.js - 如何在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 问题类似于这个问题（尤其是这个问题），但没有一个解决了只能发出 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 个永远不会完成。

任何指针？谢谢！

标签： node.jsangulartypescripthttp

Answer 1

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

你的错误：

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

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

我还建议在服务器代码中设置一个断点，以查看部门的端点从客户端接收到什么。可能是您的服务器抛出异常，因为您立即尝试使用查询参数执行某些操作，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)
]);