How to convert a Fetch API response to RxJS Observable?

Question

How can I convert whatever Fetch API returns to RxJS Observable? Does RxJS.fromPromise help?

Answer 1

As fetch call returns yet another promise containing the response object, I'd go with creating your own 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

check out this article

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

Answer 3

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);
    }),
)

Answer 4

I am using rxjs 6.5.3. I am using below example to convert Fetch API response to 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);
});

You can also use fromFetch of rxjs. But fetch API are still experimental.