how to wait for API response before executing code in Angular

Question

I have to wait for data from an API to set value of a variable and use it in a if condition.

The problem is i'm not clear how to wait for the data using async and await. I tried a few things below is the code .

currentObj.isObjEditable = this.isObjEditable(obj);

async isObjEditable(obj: any) {
    if (this.isContentEditable === undefined) {
      let test = await this.getsocialMediaData();
      console.log(test);

    }
    else {
      if (this.isContentEditable) {
        if (some Condition1 )
          return true;
        else if (condition2)
          return true;
        else if (condition 3)
          return true;
        else {
          return false;
        }

      }
      else
        return false;
    }

async getsocialMediaData() {

      this.commonService.getSocialMediaSettings().subscribe(value=> {
       return value;
     });

  }

getSocialMediaSettings(){

 return Observable.timer(0, 60000)
            .switchMap(() => this.http.get(url, { headers: headers, method: 'GET' }))
            .map(res => res.json());

}

when i log test it returns a promise.The value of isContentEditable is set from the data received from the API.

I know what i have done is not correct but i also dont know how to correct this or what is the right approach.

Please Guide

Thanks

Benedikt Schmidt · Accepted Answer · 2018-05-30 12:33:58Z

I think the async-await does not work with observables, but only with promises. In your getsocialMediaData() function you are using an observable subscribe call which should resolve your value. That doesn't work with await. Here's a description of what await is doing (source):

If a Promise is passed to an await expression, it waits for the Promise to be fulfilled and returns the fulfilled value. [...] If the value is not a Promise, it converts the value to a resolved Promise, and waits for it.

This is the reason why your log returns a promise, the function that you are using here is not returning a promise, so it just creates one.

Now the trick that we can do here should be simple (but also not 100% clean, I should note that). Instead of subscribing to the observable inside of your getSocialMediaData() function, we can just create a promise from it and return this promise. Also the function here does not have to be async anymore, only the one where await is called inside. Here's what it could look like.

// this has to be async, so that it pauses on an await call
async isObjEditable(obj: any) {
  if (this.isContentEditable === undefined) {
    let test = await this.getsocialMediaData();
    console.log(test);
  }
  else {
    ...
  }
  else
    return false;
}

// this does not have to be async anymore
function getsocialMediaData() {
  // here we make a promise out of the observable and RETURN it
  return this.commonService.getSocialMediaSettings().toPromise();
  // this will return the fullfilled value
}

Here you can find more about async and await. Hope this helps.

Collectives™ on Stack Overflow

how to wait for API response before executing code in Angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related