Joining various asynchronous HTTP calls is recommended

Upon initialization, I make 4 HTTP requests for data. After that, I need to load the data from the server to fill the forms based on the data model of the last 4 HTTP calls.

In simpler terms, I need to subscribe to these 4 HTTP calls and ensure they do not fail before finally making the 5th HTTP call to fetch data from the server.

From what I understand, I should avoid nesting observables and instead use switchMap, but how can I achieve this with 4 HTTP calls? Should I create an observable to wait for the HTTP calls and then use switchMap if they succeed for the 5th HTTP call?

This is the code snippet:

      ngOnInit() {
    this.service.getProvince().subscribe(
        (value) => { return value; },
        (error: AppError) => {
            if (error instanceof NotFoundError) {
                console.log('Error requesting HTTP');
            } else {
                console.log(error);
            }
        });

    // Other similar HTTP request subscriptions...

}


// This is the 5th call that needs to be done only if the last 4 calls did not fail

finalCall {
    this.service.getDomanda().subscribe((domanda: any) => {
        this.populateForm(domanda); // Method that uses data to fill forms
    },
        (error: AppError) => {
            if (error instanceof NotFoundError) {
                console.log('Error requesting HTTP');
            } else {
                console.log(error);
            }
        });
} 

Answer №1

To combine all requests and receive the results as a callback once they are all completed, you can utilize forkJoin.

import { forkJoin } from 'rxjs';
import { switchMap } from 'rxjs/operators';

ngOnInit() {
 forkJoin([this.service.getProvince(), this.service.getLanguages(), this.service.getPreferredTitles(), this.service.getReserves()])
     .pipe(switchMap(result => { 
          console.log('Provinces', result[0]);
          console.log('Languages', result[1]);
          console.log('Preferred Titles', result[2]);
          console.log('Reserves', result[3]);
          return this.service.getRequest();
      }))
      .subscribe((request: any) => {
         console.log('getRequest', request);
       });                                                          
}

Answer №2

If you want to wait for all observables to complete before emitting the last value from each request, consider using forkJoin. This operator throws an error if any of the observables encounter an error.

let firstCall = this.service.getLanguages();
let secondCall = this.service.getPreferredTitles();
 .
 .
 .
forkJoin([firstCall, secondCall]).subscribe(response => {
  // handle success response
}, (error) => {
    // handle errors
}, () => {
    // handle completion
});

To learn more about how forkJoin works, visit this link.

Answer №3

To ensure all 4 http requests are completed before filling out the form, I suggest converting those subscriptions to promises using .toPromise(). Although this is not a complete working example, the concept is explained below:

try {
    ... await this.service.getProvince().toPromise();
    ... await this.service.getTitoliPreferenziali().toPromise();
    ... await this.service.getLingueStraniere().toPromise();
    ... await this.service.getRiserve().toPromise();
    //fill form
}catch(error) {
 //display error message or handle retrying calls
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The package and package-lock files are out of sync when executing npm ci

Currently facing an issue while attempting to deploy my application on Heroku. The problem arose when trying to run the frontend, specifically with: `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are ...

ngFor loop is not displaying the correct values from the JSON object

Having some trouble making a REST call and displaying the results obtained. I've managed to successfully work with a simpler JSON data structure, but I'm struggling to get ngFor to properly process this particular data structure. I've tried ...

React animation failing to render underline animation

After tinkering with the underline animation while scrolling down on Codepen using Javascript, I successfully implemented it. You can check out the working version on Codepen. This animation utilizes Intersection Observer and a generated svg for the underl ...

Setting up angular-cli project for rc5- Step by step guide

Trying to integrate angular-cli with angular 2 rc5 but facing challenges: The issue of 'Promise' not being found After attempting to install 'npm install -g angular-cli@webpack', typings did not get installed, resulting in WebStorm un ...

Passing the user input from a textbox to a directive's input string in Angular 9 using Typescript

Is it possible to transfer the value entered in a textbox to another directive's input variable without utilizing ngModel? I am curious about how this can be accomplished. Here is the code snippet: HTML : <input type="text" placeholder= ...

Assess the equation twice using angular measurement

I am attempting to assess an expression that is originating from one component and being passed into another component. Here is the code snippet: Parent.component.ts parentData: any= { name: 'xyz', url: '/test?testid={{element["Te ...

Leverage Typescript to convert string literal types to uppercase

type x = 'first' | 'second' I am looking to create a type y that is similar to this: type y = 'FIRST' | 'SECOND' Here is what I attempted: type x = 'first' | 'second' type y = {[key in x]: key[& ...

Angular Service worker mishandles http redirects (302)

In my current project, I am implementing Angular and Spring Boot technologies. When I build the project, Angular generates the service worker for me. The issue arises when I use an external service (auth2) and my backend redirects to the login page after ...

Can Vue props accept a generic type argument?

Currently, I have a basic component that is receiving the following props: props: { options: { type: Array as PropType<unknown[]>, default: () => [] }, labelKey: { type: String, default: "label" ...

Protractor fails to capture the presence of mat-dialog-container

My Protractor test for an Angular 5 application is functioning well, except when it has to handle a popup containing input fields. The HTML element representing the popup looks like this: <mat-dialog-container class="mat-dialog-container ng-tns-c26-5 n ...

Resolve the problem in Angular 6 related to an unused type and the absence of a certain property

I recently watched a video tutorial (link: https://www.youtube.com/watch?v=z4JUm0Bq9AM) and encountered some errors in my CLI. The specific errors are as follows: ERROR in sidebar.component.ts(12,5): error TS7028: Unused label. sidebar.component.ts(14,56 ...

Communication between components in Angular 7 using services

I am working on creating a wizard-like interface with multiple steps. Within this setup, I have two components that do not have a direct parent-child relationship: The footer component contains a submit button that triggers the transition to the next ste ...

Ways to retrieve class attributes in a child context

When trying to access the class properties (or methods) from another scope, I find myself having to store it in a local variable within the function scope. class MyClass { constructor(API) { this.API = API; this.property = 'value& ...

Setting up React Context API with TypeScript: A Step-by-Step Guide

I recently updated my app.js file to app.tsx for improved functionality. However, I encountered an error with the current value. app.tsx import React, { createContext, useState } from "react"; import SelectPage from "./pages/select/select& ...

The NestJS error code TS7016 was triggered due to the absence of a declaration file for the 'rxjs' module

TS7016: An error occurred while trying to locate a declaration file for the module 'rxjs'. The file 'C:/Path/to/project/node_modules/rxjs/dist/cjs/index.js' is implicitly set to type 'any'. You can try running npm i --save-dev ...

Refreshing a page with a 404 error in Angular 2 while in production mode and without the useHash configuration

I've encountered an issue while using Angular 2 without the useHash feature. When trying to visit the URL directly in a browser, I'm getting a 404 not found error. I have searched extensively and attempted various solutions including: Adding L ...

Angular2: Retrieving the XLS file received from the backend

I am utilizing Laravel 5.1 REST API along with the maatwebsite solution to create an Excel file from the back-end. My main goal is to initiate the download of the file upon button click. Currently, I am making an AJAX request through Angular2's Http s ...

The correlation of types between function parameters using function overloads in TypeScript

In the process of developing a factory function, I am incorporating a type argument to specify the type of object being created, along with a parameter argument containing parameters that describe the object. The parameters are dependent on the specific ty ...

Issue with Mat-AutoComplete arising while utilizing a formArray

After adding a form array to account for multiple rows, I had to modify my definition from: shoppingCartList Observable<any[]>; to shoppingCartList: Observable<any[]>[] = [];. However, this change resulted in an error in my filter function whic ...

Utilizing a setup module for configuration purposes

In the process of developing my angular application, I have integrated several external modules to enhance its functionality. One crucial aspect of my final application is the configuration classes that store important values like URLs and message keys us ...