在 RxJs 中获取更多数据

Question

我在使用 fromFetch 从 rxjs 应用获取“更多”数据时遇到了一些问题。我有 React 和 RXJS 的项目。目前我正在使用这样的东西：

  const stream$ = fromFetch('https://pokeapi.co/api/v2/pokemon?limit=100', {
    selector: response => response.json()
  }).subscribe(data => console.log(data));

但是！我想动态更改限制，当我单击按钮时甚至更好 - 当我滚动到我的网站的最底部时。如何制作这样的东西？那么，根据一些互动，限制会改变吗？

Answer 1

您的可观察对象在您的案例中的工作方式是请求-响应。您将 stream$ 声明为可观察的，当有人订阅时，它会发出 limit=100 的请求。

有多种方法可以解决这个问题...最直接的方法是：

const getPokemon$ = limit =>
  fromFetch('https://pokeapi.co/api/v2/pokemon?limit=' + limit, {
    selector: response => response.json()
  });

const MyComponent = () => {
  // ...
  
  useEffect(() => {
    const sub = getPokemon$(limit).subscribe(res => console.log(res));

    return () => sub.unsubscribe();
  }, [limit])

  // ...
}

另一种可能更被动但对其他人来说更难遵循的选择是声明另一个设置限制的流：

const limit$ = new BehaviorSubject(100)

const pokemon$ = limit$.pipe(
  switchMap(limit => fromFetch('https://pokeapi.co/api/v2/pokemon?limit=' + limit, {
    selector: response => response.json()
  }))
);

// In your component

const MyComponent = () => {
  // ...

  useEffect(() => {
    const sub = pokemon$.subscribe(res => console.log(res));

    return () => sub.unsubscribe();
  }, [])

  changeLimit = (newLimit) => limit$.next(newLimit)

  // ...
}

在另一个解决方案中，您要声明 pokemon$ 应如何对 limit$ 的更改做出反应，并且您可以从任何其他组件设置 limit$。

在 RxJs 中获取更多数据

Fetch more data in RxJs

api

fetch

observable

rxjs