Angular 2: Two Backend Service Calls on Success of First Service

Angular 2: Two backend service calls on success of first service

You need to leverage the flatMap operator to call one request after the previous one completed:

this.service.getUserInterests().flatMap(
  (interests) => {
    let params: URLSearchParams = new URLSearchParams();
    params.set('access_token', localStorage.getItem('access_token'));
    return this.http.get('http://localhost:8080/user/selections', {
      search: params
    }).map((res: Response) => res.json());
  }
);

When subscribing to this data flow, you will only receive the result of the last request.

You could use the Observable.forkJoin method to return both. Here is a sample:

var obs = this.service.getUserInterests().flatMap(
  (interests) => {
    return Observable.forkJoin([
      Observable.of(interests),
      this.service.getUserSelections()
    ]);
  }
);

obs.subscribe(
  (result) => {
    var interests = result[0];
    var selections = result[1];
  }
);

How to call multiple API and subscribe in angular 6?

You can use

forkJoin()

To handle multiple calls at the same time, where you can call multiple request and after subscribing you will get an array of resoponse.

eg

    forkJoin(Service1.call1, 
     Service2.call2)
    .subscribe(([call1Response, call2Response]) => {

Where service1 and service2 are service which have function ccall1 and call2 , that are having return type Observable

You can find more Here

Observable type with two http.get calls in Angular 2

Try writing this as your method body, this is one way there are other ways to solve this.

return this.http
   .get(apiUrl, options)
   .map(response => response.json())
   .flatMap(example => {
       this.example.FirstName = example.FirstName;
       this.example.LastName = example.LastName;

       return this.http
           .get(`/api/${userId}`)
           .map(response =>  {
               let example =response.json();
               this.example.Street = example.Street;
               this.example.City = example.City;

               return this.example;
           });
   });

Angular - Make multiple HTTP calls sequentially

This can be achieved using the switchMap operator. This example uses RxJS 5.5+ pipeable operators.

import { switchMap } from 'rxjs/operators';

registerUser(user: User) {
  return this.utility.getIpAddress().pipe(
    switchMap(data => {
      this.ipAddress = data.ip;

      const body = {
        UserName: user.UserName,
        Email: user.Email,
        UserIP: this.ipAddress,
      };

      return this.http.post(this.registerAPI, body);
    })
  )
}

RxJS < 5.5:

import { switchMap } from 'rxjs/operators';

registerUser(user: User) {
  return this.utility.getIpAddress()
    .switchMap(data => {
      this.ipAddress = data.ip;

      const body = {
        UserName: user.UserName,
        Email: user.Email,
        UserIP: this.ipAddress,
      };

      return this.http.post(this.registerAPI, body);
    });
}

Call a function every 10 seconds Angular2

Better use observables

this.sub = Observable.interval(10000)
    .subscribe((val) => { console.log('called'); });

to stop it use

this.sub.unsubscribe();

Make sure to import interval with

import 'rxjs/add/observable/interval';

---

Related Topics