How to convert a Fetch API response to RxJS Observable?

rxjs es6-promise fetch-api
wonderful world picture wonderful world · Jul 3, 2017 · Viewed 14.5k times · Source

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

Answer

wawka picture wawka · Nov 1, 2017

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*/);

Related questions

fromPromise does not exist on type Observable

In Angular 2 using rxjs I was trying to convert a Promise to Observable. As many of online guides showed I used fromPromise on Observable. Which throws error: Property 'fromPromise' does not exist on type 'typeof Observable'. Observable was imported like: …

Read More
Use a promise in Angular HttpClient Interceptor

Can I use promise within HttpInterceptor? For example: export class AuthInterceptor implements HttpInterceptor{ this.someService.someFunction() .then((data)=>{ //do something with data and then return next.handle(req); }); } why I need this? because I need to get a token …

Read More
What is the difference between Promises and Observables?

What is the difference between Promise and Observable in Angular? An example on each would be helpful in understanding both the cases. In what scenario can we use each case?

Read More