How to Properly Convert a Fetch Promise into an Observable in Ionic 5 using Typescript?

Question

How to Properly Convert a Fetch Promise into an Observable in Ionic 5 using Typescript?

I'm in the process of transitioning my Ionic3 app to Ionic5 and currently working on integrating my http requests. I previously utilized angular/http in Ionic3, but it appears that it has been deprecated. This was how I handled observables in my code:

   this._http.get(requestURL)
      .map((result: Response) => {
        return this.run(result.json())
   });

Now that http is no longer available in Ionic5, what is the alternative approach to achieve the same functionality?

Rx.Observable.fromPromise(fetch(url));

However, it seems that the above method is not functioning correctly as

fromPromise does not exist on Rx.Observeable

.

typescript ionic-framework rxjs ionic5

Answer 1

Answer №1

For those utilizing RxJS 6, the recommended approach is to utilize the from operator instead. This operator will transform the promise into an observable:

const request = fetch(url);

from(request).pipe(
  switchMap(response => response.json()),
 ... perform other tasks here.
)

Answer 2

For those utilizing RxJS 6, the recommended approach is to utilize the from operator instead. This operator will transform the promise into an observable:

const request = fetch(url);

from(request).pipe(
  switchMap(response => response.json()),
 ... perform other tasks here.
)

How to Properly Convert a Fetch Promise into an Observable in Ionic 5 using Typescript?

Answer №1

Similar questions

Creating a table with merged (colspan or rowspan) cells in HTML

Issue encountered while implementing a recursive type within a function

Angular 2 Popup Modal Issue: "Expression modified after checking"

Utilize clipboard functionality in automated tests while using Selenium WebDriver in conjunction with JavaScript

Having trouble pushing data to a GraphQL database from my Next.js application

The Intersection of Material-UI, TypeScript, and Powerful Autocomplete Features

Using React with Typescript: Passing Props and Defining Data Types

Material UI offers a feature that allows for the grouping and auto-completion sorting

Guide to building an interface for an object containing a nested array

How to Unsubscribe from an Angular 2 Subscription Automatically After a Timeout

Strategies for iterating over an array in React with TypeScript

Error code 2532 occurs when trying to access an object using square brackets in TypeScript

Connecting Ionic 3 with Android native code: A step-by-step guide

Is Intellisense within HTML not available in SvelteKit when using TypeScript?

VIDEOJS ERROR: A peculiar mistake has occurred. TypeError: The property 'value' cannot be read since it is undefined in the context of

What made the "in" operator not the best choice in this situation?

The issue with Multiselect arises when the array is being set up initially

Angular Bootstrap Modal not Displaying

Is there a way to include values in the body of an HTTP GET request using Angular?

express-validator not providing any feedback from endpoint when integrated with TypeScript