Как работают Promise в Angular?

Question

[Roman Khegay]

Столкнулся с проблемой непонимания того, как работают промисы.

Есть приложение на Ionic/Angular для iOS.
В приложении есть сервис, в котором я использую native-storage.

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

Также, в сервисе есть функция, по которой я запрашиваю данные с сервера:

latest() {
        this.getToken()

        let options = {
            headers: new HttpHeaders({
                'auth': this.token
            })
        }

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

И есть вью, в котором я вызываю функцию из сервиса:

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

Проблема:
Когда я вызываю async/await функцию getToken() и после обращаюсь к серверу, то в запросе к серверу уходит null в токене. Если же я меняю функцию на async/await:

async latest() {
        await this.getToken()

        let options = {
            headers: new HttpHeaders({
                'auth': this.token
            })
        }

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

то, в таком случае, не срабатывает функция .subscribe() во вьюшке.

Может быть кто-то сможет объяснить как же работают Promise и что я делаю не так?

Comments

[Andrew]

Так подпишитесь на возврат значения(getToken) и внутри вызовите нужную функцию с токеном

Answer 1

[Антон Швец]

this.http.get возвращает Observable, это объект библиотеки rxjs, он не является промисом или thenable и к нему не может быть применен await
Вы можете привести его к промису вот так

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

Однако в ангуляре нормальной практикой считается избегание промисов.
И ваши методы дожны выглядеть так

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