To prevent callback hell in Angular 2 when making multiple HTTP requests

Back in my Angular 1 days, I used to nest HTTP calls and react to their results like this:

this.$qSessionPromise
.then(() => {
    return this.Init();
})
.then(() => {
    return this.Services.GetData1("id1");
})
.then((data: model.DataType1) => {
    this.data = data;
 })
.then(() => {
    this.SetIsInitialized(true);
    this.handler = new MyHandler(this.data);
    this.RegisterEvents();
});

However, in Angular 2, I couldn't figure out a similar approach...

When using the subscribe method, it seemed impossible to add another subscribe method...

    this.service.GetData1()
    .subscribe(data:model.DataType1 => {
       this.data = data;
   return this.Services.GetData2("id2");
    })
.subscribe(data:model.DataType2 => {
       this.data = data;
    })

Is there a workaround for this issue?

Answer №1

To enhance your code, replace the usage of .subscribe() with .mergeMap() except for the last one. This is crucial because without .subscribe(), no HTTP call will be initiated.

   this.service.GetData1()
   .mergeMap(data:model.DataType1 => {
       this.data = data;
       return this.Services.GetData2("id2");
   })
   .subscribe(data:model.DataType2 => {
       this.data = data;
   })

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

Implementing an interface in TypeScript and assigning it a value using generics?

I'm struggling to make sense of a type declaration I came across in the react-router library: export interface RouteComponentProps< Params extends { [K in keyof Params]?: string } = {}, C extends StaticContext = StaticContext, S = H.Lo ...

The best way to access the value of a fulfilled Promise while debugging

I've been using this loopback application in my IntelliJ IDE. I set a breakpoint at the promise in calculator.controller.ts, where the code looks like this: @get('/multiply/{intA}/{intB}') async multiply( @param.path.integer('in ...

Make sure to refresh the state of the store whenever there is a change detected in the input

I am experiencing an input delay problem when trying to update the state of a zustand variable in the onChange event. const BuildOrder = (props: { setOpen: Function }) => { const { almacenes, isLoadingAlmacenes } = useGetAlmacenes(); const { article ...

Retrieve information using Angular's EventEmitter

Recently I started learning Angular and encountered a challenging issue that has kept me occupied for the past few hours. I have implemented a parent-child relationship between two components, with a need to share a boolean variable from the parent to the ...

Managing state within SolidJS components using Immer's "produce" for nested state handling

I've been working on a SolidJS application where I store a large JSON object with nested objects. For undo and redo actions, I'm using Immer to generate patches. Although technically I'm storing a class with multiple layers of nesting, Immer ...

Tips for accessing and manipulating an array that is defined within a Pinia store

I have set up a store to utilize the User resource, which includes an array of roles. My goal is to search for a specific role within this array. I've attempted to use Array functions, but they are not compatible with PropType<T[]>. import route ...

Having difficulty transforming ".jsx" to ".tsx" in a Next.js application while working with "getStaticProps"

My application utilizes the Printifull API and performs well with .jsx using the code snippet below: import axios from "axios"; export default function ApiTest(props) { console.log(props); return( <></> ( } export async ...

Implement an interface with a specific number of properties in TypeScript

I am attempting to create a custom type that defines an object with a specific number of key-value pairs, where both the key and value are required to be numbers. Here is what I envision: type MatchResult = { [key: number]: number; [key: number]: numbe ...

What is the process for turning off deep imports in Tslint or tsconfig?

Is there a way to prevent deep imports in tsconfig? I am looking to limit imports beyond the library path: import { * } from '@geo/map-lib'; Despite my attempts, imports like @geo/map-lib/src/... are still allowed. { "extends": &q ...

Bring in services from a neighboring module within Angular 2

In my Angular 2 project, the module structure is as follows: app |-module1 |-module2 |-component2-1 |-component2-2 |-factories The factories module contains various providers defined in this manner: @NgModule({ provi ...

Angular: bypassSecurityTrustHtml sanitizer does not render the attribute (click)

I'm facing an issue where a button I rendered is not executing the alertWindow function when clicked. Can anyone help?: app.component.ts: import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core'; import ...

In order to successfully run this generator XXX, you need to have a minimum of version 4.0.0-rc.0 of yeoman-environment. However, the current version available

When attempting to run a generator using the latest version of yeoman-generator (7.1.0), yo discord An error message pops up saying: This generator (discord:app) requires yeoman-environment version 4.0.0-rc.0 or higher, but the current version is 3.19.3. ...

Capture a screenshot with Puppeteer at a random URL stop

I am facing an issue with my service nodejs running on Ubuntu, where I use puppeteer to capture screenshots of pages. However, the method page.screenshot({fullPage: true, type: 'jpeg'}) sometimes fails on random URLs without displaying any errors ...

What is the best way to iterate over an array of objects?

I have an Array of Objects that I need to use in order to create an HTML Table: Array(5) 0: Object id: 4 name: Sand Jane address: Green Sand Street ... ... ... 1: Object 2: Object ... ... ... Currently, I am able to perform a search wit ...

What is the best way to retrieve a property from a conditional type using generics?

The code snippet above presents an issue in TypeScript: const exampleFn = function<AttributeName extends 'attributeA' | 'attributeB'>( whatToProcess: AttributeName extends 'attributeA' ? {attributeA: string} : {attri ...

Ways to induce scrolling in an overflow-y container

Is there a way to create an offset scroll within a div that contains a list generated by ngFor? I attempted the following on the div with overflow-y: @ViewChild('list') listRef: ElementRef; Then, upon clicking, I tried implementing this with s ...

Using the ternary operator for rendering components in TSX: A beginner's guide

Currently, I am retrieving data from a server. The component to display is determined based on the result of this retrieval process. const response = fetch(url) .then((result) => result.json()) .then((data) => data) .catch((e) => { ...

The file is missing the required fields in the Firestore document

I've been facing a challenge while attempting to update specific fields within a firebase document. Even though the cloud function triggers and performs an upload on the document, the values of the fields I am trying to update never seem to get upload ...

In TypeScript, the nested object structure ensures that each property is unique and does not repeat within

Here is the current state of my interface. I am wondering if there is a way to streamline it to avoid repeating properties in both parts. export interface Navigation { name: string; roles: Array<number>; sublinks: NavigationItem[]; } ...

Creating a RESTful API with Express, Firestore, Cloud Functions, and TypeScript

In my quest to create a REST API for my app, I've been delving into tutorials on Firestore & Cloud Functions. Unfortunately, all the ones I've come across are either outdated or simply don't work. This has been quite frustrating for me a ...