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

【问题标题】：how to wait for API response before executing code in Angular如何在 Angular 中执行代码之前等待 API 响应
【发布时间】：2018-11-09 06:21:01
【问题描述】：

我必须等待来自 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 接收到的数据设置的。

我知道我所做的不正确，但我也不知道如何纠正或正确的方法是什么。

请指导

谢谢

【问题讨论】：

标签： angular typescript async-await

【解决方案1】：

我认为 async-await 不适用于可观察对象，而只能用于承诺。在您的 getsocialMediaData() 函数中，您正在使用一个可观察的订阅调用，它应该解决您的值。这不适用于await。这是await正在做什么的描述（source）：

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

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

现在我们可以在这里做的技巧应该很简单（但也不是 100% 干净，我应该注意这一点）。无需订阅 getSocialMediaData() 函数内部的 observable，我们可以从它创建一个 Promise 并返回这个 Promise。此外，这里的函数不必再是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 你可以找到更多关于 async 和 await 的信息。希望这会有所帮助。

【讨论】：