How to async an api response inside a conditional statement?

Question

I have a function which has an API call inside an 'if' condition.When I execute that function, before completing the API response, the program moves to below code lines.That breaks the functional flow since some below codes are running before API response comes Below is my code.

 change(event: any) {

    let selectedUnitIds = event.source.value;
    let newUnitIds = this.getNewUnitIds(selectedUnitIds);

    if (newUnitIds.length !== 0) {
      this.commonServerService.getOrgUnitById(newUnitIds).subscribe(orgUnits => {
        orgUnits.forEach(unit =>
          this.unitMap.set(unit.id, unit)
        );
      });
    }


    //get selected ids' orgunits
    let selectedOrgUnits = this.getSelectedUnits(selectedUnitIds);

    // get tribes of those orgunits
    let need = this.getNeededTribes(selectedOrgUnits);
  }

The problem here is the if condition. If this API is called unconditionally, inside the subscribe method, everything is working asynchronously. Please guide me through this.

later added:- common-server.service.ts

 getOrgUnitById(id: string[]): Observable<Array<OrgUnit>>
  {
    return this.orgUnitService.findOrgUnitByIds(id);
  }

can you also post the getOrgUnitById() function from commonServerService? — Suhas Parameshwara
– Suhas Parameshwara, Commented Nov 7, 2019 at 10:28

the-juju · Accepted Answer · 2019-11-07 10:59:44Z

2

You may use 'await' before "this.commonServerService.getOrgUnitById" You will need to declare "change" function as an async

async change(event: any) {

  let selectedUnitIds = event.source.value;
  let newUnitIds = this.getNewUnitIds(selectedUnitIds);

  if (newUnitIds.length !== 0) {
    const orgUnits = await this.commonServerService.getOrgUnitById(newUnitIds);
    orgUnits.forEach(unit =>
      this.unitMap.set(unit.id, unit)
    );
  }

  //get selected ids' orgunits
  let selectedOrgUnits = this.getSelectedUnits(selectedUnitIds);

  // get tribes of those orgunits
  let need = this.getNeededTribes(selectedOrgUnits);
}

async getOrgUnitById(id: string[]): Promise<Observable<OrgUnit[]>>
{
  return await this.orgUnitService.findOrgUnitByIds(id).toPromise();
}

edited Nov 7, 2019 at 10:59

answered Nov 7, 2019 at 10:26

the-juju

17611 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Tharushi Geethma Over a year ago

I tried it but it is said that 'await' has no effect on the type of this expression

the-juju Over a year ago

You will need to do it in getOrgUnitById too. See updated answer

Madhawa Priyashantha Over a year ago

really is it possible to await for observable?

the-juju Over a year ago

Probably yes. I suggest to return Promise<Observable<Array<OrgUnit>>>. See updated answer :)

Madhawa Priyashantha Over a year ago

probably not because even if you return promise it's only usable inside subscribe method not the return type. also mixing promise and observable like this is not a good practice.

|

Pardeep Jain · Accepted Answer · 2019-11-07 11:02:10Z

2

You can simply put your code in the response block, it will execute only after completion of API call then, like below -

change(event: any) {

let selectedUnitIds = event.source.value;
let newUnitIds = this.getNewUnitIds(selectedUnitIds);

if (!newUnitIds.length) {
  this.commonServerService.getOrgUnitById(newUnitIds).subscribe(orgUnits => {
    orgUnits.forEach(unit =>
      this.unitMap.set(unit.id, unit)
    );
     this.someAnotherMethod();
  });
} else {
     this.someAnotherMethod();
  }
}

someAnotherMethod() {
  let selectedOrgUnits = this.getSelectedUnits(selectedUnitIds);
  let need = this.getNeededTribes(selectedOrgUnits);
}

edited Nov 7, 2019 at 11:02

answered Nov 7, 2019 at 10:23

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

3 Comments

Tharushi Geethma Over a year ago

that works only if newUnitIds.length is not zero. It doesn't tackle the part newUnitIds.length == 0

Tharushi Geethma Over a year ago

I tried to avoid code duplication because it is not an allowed practice in my workplace. :)

Pardeep Jain Over a year ago

@TharushiGeethma good, you can call some global method then. Though no doubt chance of code optimization is always there. :)

Menuka Ishan · Accepted Answer · 2019-11-07 13:27:54Z

0

Use async and await as below code.

To use below code every method call change() method should be async.

 async change(event: any) {

    let selectedUnitIds = event.source.value;
    let newUnitIds = this.getNewUnitIds(selectedUnitIds);

    if (newUnitIds.length !== 0) {
      try{
        await this.getOrgUnitById(newUnitIds);
      }catch (e) {
        console.log(e);
      }
    }
    //get selected ids' orgunits
    let selectedOrgUnits = this.getSelectedUnits(selectedUnitIds);

    // get tribes of those orgunits
    let need = this.getNeededTribes(selectedOrgUnits);
  }


  getOrgUnitById(newUnitIds){
    return new Promise((resolve, reject) => {
      this.commonServerService.getOrgUnitById(newUnitIds).subscribe(orgUnits => {
        orgUnits.forEach(unit =>
          this.unitMap.set(unit.id, unit)
        );
        resolve(orgUnits)
      },error=>{
        reject(error)
      });
    })
  }

edited Nov 7, 2019 at 13:27

answered Nov 7, 2019 at 10:51

Menuka Ishan

5,5644 gold badges55 silver badges70 bronze badges

2 Comments

the-juju Over a year ago

It's the same solution than mine. You just use new Promise and kicked off return type on getOrgUnitById

Madhawa Priyashantha Over a year ago

you don't need to create a promise like this you can use toPromise()

Collectives™ on Stack Overflow

How to async an api response inside a conditional statement?

3 Answers 3

11 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related