Rx JS - создание автозаполняемой наблюдаемой, которая сначала возвращает данные из кэша, а затем с сервера

Question

Я нашел эту статью, которая объясняет, как я могу использовать Rx Js для создания наблюдаемой для автозаполнения: https://blog.strongbrew.io/building-a-safe-autocomplete-operator-with-rxjs

const autocomplete = (time, selector) => (source$) =>
  source$.pipe(
    debounceTime(time),
    switchMap((...args: any[]) => 
      selector(...args)
        .pipe(
            takeUntil(
                source$
                    .pipe(
                        skip(1)
                    )
            )
        )
    )
  )
  
  
    term$ = new BehaviorSubject<string>('');
  results$ = this.term$.pipe(
        autocomplete(1000, (term => this.fetch(term)))
    )

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

Как я могу построить его наиболее эффективным способом? С уважением, Тал Хуми

Answer 1

Итак, поработав несколько часов, я понял, что решение было очень простым:

        autocomplete(1000, (term => new Observable(s => {
          const storageValue = this.fetchFromStorage(term);
          s.next(storageValue);
          this.fetchFromServer(term)
            .subscribe(r => s.next(r));
        })))

Answer 2

Я думаю, вы можете воспользоваться startWith.

const term$ = new BehaviorSubject('');
const localStorageResults = localStorage.getItem(''); // Map it into the same shape as results$ but the observable unwrapped
const results$ = term$
    .pipe(
        startWith(localStorageResults),
        debounceTime(1000),
        switchMap(term => 
            getAutocompleteSuggestions(term)
                .pipe(
                    takeUntil(
                        //skip 1 value
                        term$.pipe(skip(1))
                    )

                )
            )
        )
    )

Возможно, вам придется повозиться с этим, я не уверен, будет ли это хорошо играть с debounceTime, но это идея.