在Angular中执行代码之前如何等待API响应

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

}

当我进行日志测试时，它返回一个promise。isContentEditable的值是从API接收的数据中设置的。

我知道我所做的是不正确的，但我也不知道如何更正此错误或正确的方法。

请指导

谢谢

Answer 1

我认为异步等待不适用于可观察对象，而只能用于应许。 在您的getsocialMediaData()函数中，您正在使用可观察的订阅调用，该调用应可以解析您的值。 await无效。 这是对await正在做什么的描述（ 源 ）：

如果将Promise传递给await表达式，则它将等待Promise被实现并返回被实现的值。 [...]如果该值不是Promise，则将其转换为已解决的Promise，然后等待。

这就是您的日志返回承诺的原因，此处使用的函数没有返回承诺，因此仅创建了一个。

现在我们可以在这里完成的技巧应该很简单（但也不是100％干净，我应该注意）。 无需订阅getSocialMediaData()函数内部的可观察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
}

在这里您可以找到有关异步和等待的更多信息。 希望这可以帮助。