坚持试图理解 JS 中的 Promise 是如何工作的答案

【问题标题】：Stuck on trying to understand how Promises in JS worked坚持试图理解 JS 中的 Promise 是如何工作的
【发布时间】：2020-05-28 20:22:11
【问题描述】：

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

所以，我正在使用： @ionic-native/native-storage & @angular/http 在 Angular 服务中是这样的：

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>

【问题讨论】：

只要使用“await this.getToken()”，它就会等待promise完成。
@AlexanderElert 我在 getLatestVideo() 中遇到错误，说 .subscribe 在 Promise 类型上不存在，当我使用时等待 this.getToken()

标签： javascript angular promise

【解决方案1】：

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

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

也许这会有所帮助？

【讨论】：

没有。如果latest() 不等待this.getToken()，那么它将在检索令牌之前立即进行第二次HTTP 调用。
我已将异步等待添加到最新（），我得到令牌，我从服务器获取信息。但现在的问题是，我无法使用 *ngFor 在 .html 中显示它
啊，不知道get token也是异步的。但在 Angular 问题中，我无能为力，抱歉 :) 你能在 ngFor 周围包装一个 if 并等待，直到数据完成吗？
这有帮助吗？ stackoverflow.com/questions/34657821/…

【解决方案2】：

getToken(): Observable<string> {
    return from(this.storage.getItem('token'));
}

latest() {
  return this.getToken().pipe(
    switchMap(token => {
        const headers = new HttpHeaders({ auth: token });
        return this.http.get(this.env.API_URL + 'video', { headers });
    }),
  )
}

【讨论】：

【解决方案3】：

您可以返回 Promise，而不是让所有函数异步等待。例如 getToken() { return this.storage.getItem('token') }

那么最近你可以简单地拥有：

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

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

【讨论】：