时间戳

首页 > 解决方案 > 坚持试图理解 JS 中的 Promise 是如何工作的

javascript - 坚持试图理解 JS 中的 Promise 是如何工作的

问题描述

我正在使用 Ionic 4 和 Angular 8 开发移动应用程序。我遇到了一些麻烦，试图完成简单的任务。

所以，我 在 Angular 服务中使用： @ionic-native/native-storage & @angular/http ，如下所示：

async getToken() {
    await this.storage.getItem('token')
        .then((res) => {
            this.token = res
        })
}

这是一个 Promise 解析函数，对吗？

然后，我需要在另一个函数中调用这个 async/await 函数：

latest() {
    this.getToken()

    let options = {
        headers: new HttpHeaders({
            'Auth-Key': this.token
        })
    }

    return this.http.get(this.env.API_URL + 'url', options)
}

下一步是从页面调用服务功能：

getLatestVideo() {
    this.videoService.latest()
        .subscribe(data => {
            this.latestVideo = data;
        })
}

现在的问题是：

当我试图获取这个令牌时，从存储中获取“令牌”的功能没有完成，并且 Promise 没有解决。

所以，当我调用 HttpClient 并尝试从 api 获取一些数据时，我收到一个错误，上面写着：'token，你试图调用的是 null'。

有人可以解释一下 Promises 是如何工作的吗？我无法得到它

更新 1：

问题通过 2 个步骤解决：第 1 步：使 latest() 异步

async latest() {
    await this.getToken()

    let options = {
        headers: new HttpHeaders({
            'Auth-Key': this.token
        })
    }

    return this.http.get(this.env.API_URL + 'url', options)
}

第 2 步：也使 getLatestVideo() 异步

async getLatestVideo() {
    const latestVideo = await this.videoService.latest();

    latestVideo.subscribe(data => {
        this.latestVideo = data;
    })
}

新问题：如何在视图内部解决所有承诺后显示数据：

<div *ngFor="let video of latestVideo">{{ video.id }}</div>

标签： javascriptangularpromise

解决方案

好吧，你必须使用更多的等待。

async latest() {
  await this.getToken()

  let options = {
      headers: new HttpHeaders({
          'Auth-Key': this.token
      })
  }
  return this.http.get(this.env.API_URL + 'url', options)
}

下一步

async getLatestVideo() {
  const latestVideo = await this.videoService.latest();
  latestVideo.subscribe(data => {
          this.latestVideo = data;
      })
}

也许这会有所帮助？

推荐阅读