如何将Fetch API响应转换为RxJS Observable？

Question

如何将Fetch API返回的任何内容转换为RxJS Observable？是否RxJS.fromPromise帮助吗？

Answer 1

当fetch调用返回包含响应对象的另一个promise时,我会创建自己的observable:

import { Observable } from 'rxjs';

const data$ = Observable.create(observer => {
  fetch('http://server.com')
    .then(response => response.json()) // or text() or blob() etc.
    .then(data => {
      observer.next(data);
      observer.complete();
    })
    .catch(err => observer.error(err));
});

data$.subscribe(data => /*do something with data*/);

Answer 2

看看这篇文章

var result = Rx.Observable.fromPromise(fetch('http://myserver.com/'));
result.subscribe(x => console.log(x), e => console.error(e));

Answer 3

我正在使用 rxjs 6.5.3。我使用下面的示例将 Fetch API 响应转换为 RxJS Observable。

const { from } = rxjs;
const { map, switchMap } = rxjs.operators


const observable = from(fetch('data/user.json')).pipe(
    switchMap(response => response.json())
)

observable.subscribe(function(result){
    console.log('result', result);
});

您还可以使用fromFetch的 rxjs。但 fetch API 仍处于实验阶段。

Answer 4

I'm using rxjs@6.

The operator that accepts observables(like flatMap, switchMap, etc...) can also accept promise. it's very simple as follows.

somethingObservable.pipe(
    flatMap(() => fetch('http://some.api.com/post/1')),
    subscribe((response) => {
        console.log(response);
    }),
)