RxJS Tips — Promises Into Observables

RxJS Tips — Promises Into Observables

How you can use both RxJS Observables and async/await Promises to create resilient & clean applications. This article follows on from my previous articles startWith and flatMap vs switchMap. I like writing about RxJS. Even though I’ve spent so much time with it lately with my active projects, I still find new and exciting features that improve my development workflow.

This article follows on from my previous articles _[**_startWith](https://levelup.gitconnected.com/rxjs-operator-tips-startwith-d67109c8883e)_ and _[flatMap vs switchMap](https://medium.com/swlh/cant-tell-your-flatmaps-from-your-switchmaps-a1f0f497b61a).**

I like writing about RxJS. Even though I’ve spent so much time with it lately with my active projects, I still find new and exciting features that improve my development workflow.

Whilst building a new PWA that we’re working on at Intoware, I found a need to blend together RxJS Observables and JavaScript Promises. Here’s what I found out.

TLDR;

Use the from() Observable to wrap your promises and then you can use them in an RxJS pipeline.

Read on if you’d like to know the details.


Reactive Programming?

Before we dive in deep, some quick concepts. The core principles of Reactive Programming involve subscribing to a stream of data.

Before Reactive Programming, you would request the data you needed (perhaps a stock price) and then on a timer perhaps ask for it again.

However, now, you can “subscribe” to a stream which will emit when new data is available. Much easier.

Libraries like RxJS allow the easy creation and subscription of data streams. In addition, Operators will alter the stream in different ways to create a data pipeline.

Examples of Operators could be:

  • Filter — Only process the stream is certain conditions pass
  • Throttle — Restrict in a time-based manner the data that is being emitted (usually to help with UI bottlenecks)
  • Map — Transform the data from the stream (expose properties or perform calculations)

Operators and Observables are tied together in some really interesting ways. A simple example could be:

Fetch me the latest stock ticker symbols, updating no more than once per minute

This would be achieved by:

  • Creating an Interval Observable that emits every 60 seconds
  • Switching to a GET request to fetch the stock data
  • Add the “ShareReplay” Operator to serve the same data for multiple subscribers in the future

reactive-programming rxjs asyncawait javascript-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

RxJS - Beginners Guide to Reactive JavaScript

Learn what RxJS is and why it is so powerful with hands on examples

Reactive Programming from Scratch (JavaScript) - Ep3

Reactive Programming from Scratch (JavaScript) - Let's build a reactive JavaScript library, inspired by RxJS, from scratch

Reactive Programming from Scratch (JavaScript) - Ep1

Reactive Programming from Scratch (JavaScript) - Let's build a reactive JavaScript library, inspired by RxJS, from scratch.

Hire Best JavaScript Developers | JavaScript development company USA

Hire Dedicated JavaScript Developers from a top javascript development agency for your business solutions. We provide JS web developers for hire at a fixed or hourly rate.

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.