时间戳

首页 > 解决方案 > 如何在 Angular 中执行代码之前等待 API 响应

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

问题描述

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

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

请指导

谢谢

标签： angulartypescriptasync-await

解决方案

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

如果将 Promise 传递给 await 表达式，它会等待 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
}

在这里你可以找到更多关于 async 和 await 的信息。希望这可以帮助。

推荐阅读