Застрял на попытке понять, как работали Promises в JS

Question

Я занимаюсь разработкой мобильного приложения, используя Ioni c 4 & Angular 8. И у меня возникают проблемы с попытками выполнить простые задачи.

Итак, я использую: @ ioni c -native / native-storage & @ angular / http в Angular службе, например:

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

Это функция разрешения Promise, am Я прав?

Затем мне нужно вызвать эту асинхронную / ожидающую функцию в другой функции:

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, я получаю сообщение об ошибке: «токен, вы пытаетесь вызвать ноль».

Может кто-нибудь объяснить, как работает Promises? Я не могу получить

ОБНОВЛЕНИЕ 1:

Проблема решается в 2 этапа: Шаг 1: сделать последний () asyn c

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 () asyn c тоже

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

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

---

Новая проблема: Как отобразить данные после того, как все обещания разрешены изнутри:

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

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

Может быть, это поможет?

Answer 2

Вместо того, чтобы делать все ваши функции асинхронными c -wait, вы можете возвращать обещания. Например, 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)

Answer 3

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