I have been experimenting with an async/await pattern to manage a complex scenario that could potentially result in "callback hell" if approached differently.
Below is a simplified version of the code. The actual implementation involves approximately 5 conditional HttpClient calls based on data from the initial call (not my api...), which is why I opted for the async/await pattern.
async blah(): Promise<boolean> {
try {
let resp = await this.http.get("https://httpstat.us/500").toPromise();
console.warn("this message should not be displayed");
// In the real code, there will be multiple API calls based on conditional data from 'resp',
// hence the use of async/await to avoid callback nesting.
// Eventually, 'blah()' will return an object.
return true;
}
catch (err) {
console.error("caught inside blah()");
throw err;
}
}
ionViewDidLoad() {
this.blah().then(data => {
console.warn('okokokok');
}).catch(error => {
console.error(error)
});
}
When implemented, I can observe that the call actually results in a 500 error, but the code continues and the following messages are printed to the console:
polyfills.js:3 GET https://httpstat.us/500/ 500 (Internal Server Error)
main.js:927 this message should not be displayed
main.js:940 okokokok
As seen, the error status code (500 or any other tested status) is not being caught.
The testing device is a Pixel 2 running Android P, with console data retrieved through Chrome's device inspector session.
Any guidance or advice on this issue would be highly appreciated.
** Edit: It seems this is related to a combination of Ionic and Angular... It should technically work...
** Edit: Confirmed to be a 100% Angular issue... Not the framework itself but how an interceptor was set up. Leaving this question here in case others encounter a similar problem.