How to do make >2 independent / parallel http requests in Angular 2 - node.js

Question

Basic Situation:
I am building a form in my app built with Angular CLI. The form has three select boxes containing long lists of options. These options are populated via http requests to a server. I invoke three methods in ngOnInit to make these http requests (see code below). No matter what sequence I call them in, only the first two requests ever complete.
Eventually the console will show the following error for the third request:
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
I could "chain" the three http requests to be called sequentially, but I want the http services to be reusable in other forms I build which will have the same select box input elements.
Yes I already Read:
There are a few Stackoverflow questions out there similar to this one (especially this question), but none of them address this specific issue of being able to make only 2 http requests. There is mention of using mergeMap and forkJoin, but these appear to designed for calling an array of identical requests.
My Code:
The component which is making the requets:
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')
);
}
}
My node-http.service.ts file:
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;
}
}
What I tried:
I tried commenting out each of the three methods invoked in ngOnInit to see if one of them is erring out. I've also tried shuffling the order of the three method invocations. In every scenario, the browser can successfully execute any 2 of the 3 methods, but the 3rd never completes.
Any pointers? Thank you!

Answer 1

The error you're receiving looks like a bad request. Specifically, I think you're trying to call the departments endpoint without a required dept query param. (This is hard to determine without seeing your server side code)
Your error:
Http failure response for
http://my-corporate-url:3001/db/depts?deptName=: 0 Unknown Error
If you set a correct value for this.dept before invoking your departments endpoint, do you get it to work?
I would also recommend setting a breakpoint in the server code to see what the department's endpoint is receiving from the client. It could be that your server is throwing an exception because you're immediately trying to do something with the query param deptName but it's empty so your api barfs.
Keep in mind, in JavaScript, an empty string ('') is a falsy value.
Since you're calling all your endpoints at once like this:
this.queryGroupNames();
this.queryBBB();
this.queryDepts();
You will need to chain those together if the previous call needs to pass data to the following call. If that isn't the case, and you just want to execute all requests at once, I would recommend using Promise.all
Promise.all([
this._nodeHTTPService.getSDMGroups(),
this._nodeHTTPService.queryBranches(this.loc),
this._nodeHTTPService.getDepts(this.dept)
]);