RxJS - 创建自动完成的 Observable，首先从缓存返回数据，然后从服务器返回

Question

我发现这篇文章解释了我如何使用 RxJs 为自动完成创建一个 observable： https ://blog.strongbrew.io/building-a-safe-autocomplete-operator-with-rxjsconst 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)))    )我想通过首先从本地存储返回数据并将其显示给用户然后继续到服务器获取数据来改进这个自动完成的可观察对象。从服务器返回的数据不会替换本地存储的结果，而是添加到本地存储中。如果我在每次用户键入时都正确理解它，那么 observable 应该发出两次。如何以最有效的方式构建它？

Answer 1

我认为你可以利用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但这是一个想法。

Answer 2

所以在处理了几个小时之后，我发现解决方案非常简单：

        autocomplete(1000, (term => new Observable(s => {

          const storageValue = this.fetchFromStorage(term);

          s.next(storageValue);

          this.fetchFromServer(term)

            .subscribe(r => s.next(r));

        })))