AJAX 请求的 RxJS 限制

Question

我想创建一个向后端发出 AJAX 请求的函数。如果这个函数同时被多次调用，那么它不应该向服务器发出许多相同的请求。它只能发出 1 个请求。

例如：

doAJAX('http://example-1.com/').subscribe(res => console.log); // must send a request
doAJAX('http://example-1.com/').subscribe(res => console.log); // must NOT send a request
doAJAX('http://example-2.com/').subscribe(res => console.log); // must send a request, bacause of different URL
window.setTimeout(() => {
    doAJAX('http://example-2.com/').subscribe(res => console.log); // must send a request because too much time has passed since the last request
}, 3000)

所有的函数调用都应该返回一个结果，就好像请求是真的发出的一样。

我认为为此我可以使用 RxJS 库。 我已经这样做了：

const request$ = new Subject < string > ();

const response$ = request.pipe(
    groupBy((url: string) => url),
    flatMap(group => group.pipe(auditTime(500))), // make a request no more than once every 500 msec
    map((url: string) => [
        url,
        from(fetch(url))
    ]),
    share()
);

const doAJAX = (url: string): Observable <any> {
    return new Observable(observe => {
        response$
            .pipe(
                filter(result => result[0] === url),
                first(),
                flatMap(result => result[1])
            )
            .subscribe(
                (response: any) => {
                    observe.next(response);
                    observe.complete();
                },
                err => {
                    observe.error(err);
                }
            );
        request$.next(url);
    });
}

我创建 request$ 主题和 response$ 可观察的。 doAjax 函数订阅 response$ 并将 URL 字符串发送到 request$ 主题。 request$ 流中还有 groupBy 和 auditTime 运算符。并在doAJAX 函数中过滤运算符。

此代码有效，但我认为它非常困难。有没有办法让这个任务更容易？也许是 RxJS 调度器或者根本不使用 RxJS 库

Answer 1

由于这样做的重点是记忆 Http 结果并延迟重复调用，您可以考虑自己的记忆。示例：

const memoise = (func) => {
  let cache: { [key:string]: Observable<any> } = {};

  return (...args): Observable<any> => {
    const cacheKey = JSON.stringify(args)
    cache[cacheKey] = cache[cacheKey] || func(...args).pipe(share());

    return cache[cacheKey].pipe(
      tap(() => timer(1000).subscribe(() => delete cache[cacheKey]))
    );
  }
}

这是Stackblitz DEMO