khegay
@khegay
Founder, Garuna

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

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

Есть приложение на 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 и что я делаю не так?
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
Xuxicheta
@Xuxicheta Куратор тега Angular
инженер
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 });
    }),
  )
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
01 нояб. 2020, в 01:53
5000 руб./за проект
01 нояб. 2020, в 00:04
50000 руб./за проект
31 окт. 2020, в 23:12
10000 руб./за проект