Angular HttpClient return boolean-CodePudding

I want to have a return boolean value based on conditions when I call my API that return an object, but I can't figure out how to do it because I get every time a subscription...

This is my code on component.ts:

    result(){
       return checkPiva()
    }
    checkPiva(){
        return this._mysrvUsers.getUserByPIVA('858585847');
    }

and this is my code on service.ts:

        getUserByPIVA(piva: string){
        const currentResellerCode = localStorage.getItem('resellercode')
        const url = env.apiUrl   "endUser/partitaIva?pi=" piva
        return this.httpClient.get(url).pipe(map(res=>{
            if(res){
                return true;
            }else{
                return false
            }
        }))

    }

CodePudding user response：

RxJS has a function which will transform an Observable into a Promise firstValueFrom:

import { Injectable } from '@angular/core';
import { firstValueFrom, Observable, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FakeService {
  /* get random true or false boolean mocked */
  getBool(): Observable<boolean> {
    return of(Boolean((Math.random() * 2) | 0));
  }

  getBoolAsPromise(): Promise<boolean> {
    return firstValueFrom(this.getBool());
  }
}

In your consumer:

export class SomeComponentClass {

  constructor(private fs: FakeService) {}
  
  async getBool() {
    const bool = await this.fs.getBoolAsPromise();
    console.log(bool);
  }

}

CodePudding user response：

your getUserByPIVA function is returning Observable<boolean> and you cant return a boolean from it. You can subscribe this observable wherever you want and it's the best way or if you want to achieve Synchronous behaviour using it then you can use async await to achieve this.

In order to use async-await you need to convert Observable into promise.For that you can use RxJS 7 lastValueFrom or toPromise

async useItLike(){
    let result = await lastValueFrom(this._mysrvUsers.getUserByPIVA('858585847'));
    console.log(result); // will print true/false
  }

CodePudding user response：

You should really adopt rxjs and reactive principles if you're to use Angular. It can feel overwhelming at first, but it's for the better.

service:

getFoo() {
   return this.http.get('/foo').pipe(map(res => !!res));
}

component:

getFoo() {
   return this.service.getFoo()
      .subscribe(hasFoo => {
         this.result = hasFoo;
      });
}

html:

<button (click)="getFoo()">clickme</button>
<pre>result={{hasFoo}}</pre>

CodePudding user response：

The request returns an observable so in order to get the value and use it right away you have to convert it to a promise:

getUserByPIVA(piva: string){
    const currentResellerCode = localStorage.getItem('resellercode');
    const url = env.apiUrl   "endUser/partitaIva?pi=" piva;
    return this.httpClient.get(url).pipe(map(res => !!res));
}

async result(){
   return await checkPiva();
}

async checkPiva(){
  return await this._mysrvUsers.getUserByPIVA('858585847').toPromise();
}

And you have to const res = await result(); wherever you are calling that method.