Хобрук: Ваш путь к мастерству в программировании

Как дождаться асинхронной функции в наблюдаемом?

У меня будет служба angular с функцией getTimeLinePosts для получения JSON с сервера. В компоненте timeline-page.ts я подпишусь на эту функцию. При отправке запроса на сервер мне нужно отправить дату предыдущего кэшированного ответа (используя ionic cache), чтобы проверить наличие новых данных. Проблема в том, что const date возвращает обещание вместо значения. Я не могу использовать async getTimeLinePosts из-за подписки в файле timeline-page.ts. Предложения, как я могу дождаться даты, прежде чем вернуть loadFromDelayedObservable?

  • timeline-service.ts
getTimelinePosts(
    limit: number = 25,
    offset: number = 0,
    type: string = "",
    group: number = null
) {
    let cacheKey = `api/timeline?l=${limit}&o=${offset}&t=${type}&g=${group}`;

    // How wait for this value before fire request
    const date = this.getCachedItem(cacheKey);

    let request = this.http.post(cacheKey, { headers: HEADER.headers , params: JSON.stringify({ dateUpdated: date }) } );
    let groupKey = "timeline";
    let ttl = 60 * 60 * 1;
    let delayType = "none";

    return this.cache
        .loadFromDelayedObservable(url, request, groupKey, ttl, delayType)
        .pipe(map((result) => result));

}


    async getCachedItem(cacheKey){
        let data = await this.cache.getItem(cacheKey)
        .catch(() => {
            console.log("Oh no! My promise is expired or doesn't exist!");
        });
        return await data.data.dateUpdated;
    }
  • временная шкала-page.ts
this.TimelineService.getTimelinePosts(limit, offset, type, group).subscribe(
            (data) => {
                this.setTimelineData(data);
            }
        );
angular observable promise caching ionic5
19.02.2021

Ответы:


1

Это похоже на типичный случай объединения наблюдаемых и промисов. Я бы придерживался преобразования обещания в наблюдаемое, чтобы мы могли использовать многие из его преимуществ.

Вы можете использовать функцию RxJS from для преобразования обещания в наблюдаемое. Затем вы можете использовать оператор сопоставления более высокого порядка, например switchMap, для сопоставления одного наблюдаемого с другим.

Попробуйте следующее

import { from } from 'rxjs';
import { switchMap } from 'rxjs/operators';

getTimelinePosts(
    limit: number = 25,
    offset: number = 0,
    type: string = "",
    group: number = null
) {
    let cacheKey = `api/timeline?l=${limit}&o=${offset}&t=${type}&g=${group}`;

    return from(this.getCachedItem(cacheKey)).pipe(
        switchMap(date => {
            let request = this.http.post(cacheKey, { headers: HEADER.headers, params: JSON.stringify({ dateUpdated: date }) });
            let groupKey = "timeline";
            let ttl = 60 * 60 * 1;
            let delayType = "none";

            return this.cache
                .loadFromDelayedObservable(url, request, groupKey, ttl, delayType)
                .pipe(map((result) => result));
        })
    );
}
19.02.2021

2

Вы можете использовать observables — в частности, mergeMap/flatMap, это похоже на отправку двух запросов один за другим, где второй зависит от первого:

getTimelinePosts(
    limit: number = 25,
    offset: number = 0,
    type: string = "",
    group: number = null
) {
    let cacheKey = `api/timeline?l=${limit}&o=${offset}&t=${type}&g=${group}`;

    this.getCachedItem(cacheKey)
        .pipe(mergeMap((date) => {
            let request = this.http.post(cacheKey, { headers: HEADER.headers , params: JSON.stringify({ dateUpdated: date }) } );
            let groupKey = "timeline";
            let ttl = 60 * 60 * 1;
            let delayType = "none";
        
            return this.cache
                .loadFromDelayedObservable(url, request, groupKey, ttl, delayType)
                .pipe(map((result) => result));
        }));
}
19.02.2021
Новые материалы
Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..
Как настроить Selenium в проекте Angular
Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..
Аргументы прогрессивного улучшения почти всегда упускают суть
В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..
Введение в Джанго Фреймворк
Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..
Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..
Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..
стройный-i18следующий
Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..