как ждать ответа API перед выполнением кода на Angular

Question

Мне нужно подождать, пока данные из API установят значение переменной и использовать ее в условии if.

Проблема в том, что мне не ясно, как ждать данные с использованием асинхронного режима и ожидания,Я попробовал несколько вещей ниже, это код.

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());

}

когда я проверяю журнал, он возвращает обещание. Значение isContentEditable устанавливается из данных, полученных из API.

Я знаюто, что я сделал, не правильно, но я также не знаю, как исправить это или какой правильный подход.

Пожалуйста, руководство

Спасибо

Answer 1

Я думаю, что async-await не работает с наблюдаемыми, но только с обещаниями.В вашей функции getsocialMediaData() вы используете наблюдаемый вызов подписки, который должен разрешить ваше значение.Это не работает с await.Вот описание того, что делает await ( source ):

Если Обещание передается выражению ожидания, оно ожидает выполнения Обещания и возвращаетвыполненная стоимость.[...] Если значение не является Обещанием, оно преобразует значение в разрешенное Обещание и ожидает его.

Это причина, по которой ваш журнал возвращает обещание, функция, котораявы используете здесь, не возвращая обещание, поэтому оно просто создает его.

Теперь уловка, которую мы можем здесь сделать, должна быть простой (но не на 100% чистой, я должен отметить, что).Вместо того, чтобы подписываться на наблюдаемую внутри вашей функции getSocialMediaData(), мы можем просто создать из нее обещание и вернуть это обещание.Кроме того, функция здесь больше не должна быть async, только та, где await вызывается внутри.Вот как это может выглядеть.

// 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
}

Здесь вы можете найти больше информации об асинхронности и ожидании.Надеюсь, это поможет.