Question

我必须等待来自API的数据来设置变量的值并在if条件下使用它。

问题是我不清楚如何使用async和await等待数据。我在下面尝试了一些代码。

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

我认为async-await不适用于observable，但只适用于promises。在您的getsocialMediaData()函数中，您正在使用可观察的订阅调用来解决您的价值。这不适用于await。以下是await正在做什么（source）的说明：

如果将Promise传递给await表达式，它将等待Promise完成并返回已完成的值。 [...]如果值不是Promise，它会将值转换为已解析的Promise，并等待它。

这就是你的日志返回一个promise的原因，你在这里使用的函数没有返回一个promise，所以只创建一个。

现在我们在这里可以做的诀窍应该很简单（但也不是100％干净，我应该注意到）。我们可以从它创建一个承诺并返回此承诺，而不是订阅getSocialMediaData()函数内部的observable。此处的函数不再是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
}

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

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

1 个答案: