Uses the Fetch API to make an HTTP request.

fromFetch(input: string | Request, init?: RequestInit): Observable<Response>

Parameters

Returns

Observable<Response>: An Observable, that when subscribed to performs an HTTP request using the native fetch function. The Subscription is tied to an AbortController for the the fetch.

Description

WARNING Parts of the fetch API are still experimental. AbortController is required for this implementation to work and use cancellation appropriately.

Will automatically set up an internal AbortController in order to teardown the internal fetch when the subscription tears down.

If a signal is provided via the init argument, it will behave like it usually does with fetch. If the provided signal aborts, the error that fetch normally rejects with in that scenario will be emitted as an error from the observable.

Basic Use

import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap, catchError } from 'rxjs/operators';

const data$ = fromFetch('https://api.github.com/users?per_page=5').pipe(
 switchMap(response => {
   if (response.ok) {
     // OK return data
     return response.json();
   } else {
     // Server is returning a status requiring the client to try something else.
     return of({ error: true, message: `Error ${response.status}` });
   }
 }),
 catchError(err => {
   // Network or other error, handle appropriately
   console.error(err);
   return of({ error: true, message: err.message })
 })
);

data$.subscribe({
 next: result => console.log(result),
 complete: () => console.log('done')
})