How to return multiple statement in angular?-CodePudding

I am creating Login page and want to call /login and /send-otp api together by a single function. I have already created a login and registration page.

My code :

user-data.service.ts :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
@Injectable({
  providedIn: 'root'
})
export class UserdataService {

  url= 'http://localhost:9197/register';
  url2= 'http://localhost:9197/login';
  url3= 'http://localhost:9197/send-otp';

  constructor(private http:HttpClient) {}

  saveRegistration(data:any){
    return this.http.post(this.url, data);
  }

  loginDone(ldata:any){
    return this.http.post(this.url2, ldata);
    return this.http.post(this.url3, ldata);
  }

}

How to call multiply api ??

 loginDone(ldata:any){
    return this.http.post(this.url2, ldata);
    return this.http.post(this.url3, ldata);
  }

CodePudding user response：

Apply TypeScript alias definition to your code:

Here in a more simplificated way, you have a multiple return with an alias structure.

type multi={
x:PelotaAzul,
y:PelotaRugosa,

}
function multiple():multi{
let x:PelotaAzul=new PelotaAzul("jj",5);
let y:PelotaRugosa=new PelotaRugosa("s",3,6)
let ab : multi ={x,y};
return ab;

}

You can also return an array of the both parameters like this

 loginDone(ldata:any){
    return [this.http.post(this.url2, ldata),this.http.post(this.url3, ldata)];
  }

I find creating aliases more elegant but for faster results do the second one.

CodePudding user response：

You are probably miss thinking your problem.

First of all. A return statement will always stop the function execution, doesn't matters if theres 100 lines after it.

Second, your logic probably will be: call login first then after (using or not the response) call the send-otp.

Or, your logic might be: call login and send-otp concurrently, but the loginDone method should only return some valid state if both requests run fine.

That's why other answers are completely wrong.

You must cascade your observables using pipe and switchmap for example:

return of([this.url2, this.url3]).pipe(
  switchMap((url) => this.http.post(url, ldata))
)

CodePudding user response：

If you want to return multiple values, you can return like this.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
@Injectable({
  providedIn: 'root'
})
export class UserdataService {

  url= 'http://localhost:9197/register';
  url2= 'http://localhost:9197/login';
  url3= 'http://localhost:9197/send-otp';

  constructor(private http:HttpClient) {}

  saveRegistration(data:any){
    return this.http.post(this.url, data);
  }

  loginDone(ldata:any){
    return {url1: this.url, url2: this.url2, url3: this.url3};
  }
}

If you want to call multiple api, check this one .

https://medium.com/bb-tutorials-and-thoughts/how-to-make-parallel-api-calls-in-angular-applications-4b99227e7458