首页 > 解决方案 > 我有不止一次的 api 调用,但只想在 Angular 6 中触发一次 ajax

问题描述

我有一个添加了动态小部件的仪表板,如果用户添加了两个具有相同 api 调用的小部件,它显然会命中两个 ajax 调用。我如何确保,如果 API 被调用一次,第二次调用会得到第一次调用的结果

标签: angularrxjs

解决方案


您可以使用shareReplay运算符。它正在缓存结果并将它们发送给新的订阅者,而无需再次创建流。

import { ajax } from 'rxjs/ajax';
import { tap, map, shareReplay } from 'rxjs/operators';

const endpoint = 'https://api.github.com/users?per_page=1'

const obs$ = ajax.getJSON(endpoint).pipe(
  tap(() => console.log('Making BE call')),
  shareReplay(1)
);

obs$.subscribe(x => console.log('[1]', x));
obs$.subscribe(x => console.log('[2]', x));

// Output:
// Making BE call
// [1] object
// [2] object

你可以看看这个小演示:https ://stackblitz.com/edit/rxjs-eyk9y5


推荐阅读