There are a number of resources for handling asynchronous tasks in JavaScript, each with its own strengths and suitability to specific tasks. Sometimes a single tool is all that’s necessary to accomplish a task, but there are programming challenges which can be handled more effectively by combining the capabilities of tools.
RxJS Observables enable you to operate on sequences of data, like the results of a REST API call, as if they were events, acting on new and updated data from the Observable object when the change occurs. They’re great tools to use when the timing of data events is unpredictable, like when you’re dealing with slow or occasionally unreliable web services.
JavaScript Promises are useful when you need a placeholder for the results of a task that might fail and need to respond differently depending on the task’s success or failure. Promise objects can be used with the JavaScript async and await keywords to hold the processing of a program’s main path of execution until a Promise is resolved. That’s great when your user interface behavior depends on the results of an asynchronous action.
So what do you do when your program needs to wait for the results of a slow, less-than-completely-reliable web service to determine what to do next?
You can use Observables with Promises and with async/await to benefit from the strengths of each of those tools. This post will show you how to code the combination of Observables, Promises, and async/await so your program can react to the state of an Observable and the resolution of a Promise, including errors, with timely user interface information.
Prerequisites
You’ll need the following resources to build and run the code presented in this post:
Node.js and npm – The Node.js installation will also install npm.
Visual Studio Code – or another IDE or editor
Git – for source code control or cloning the companion repository
Mocklets account – If you want to experiment with API mocking, create your own account. This tutorial’s code includes a link to a mock API set up by the author, so you don’t need an account to run the code. Free tier accounts are run-rate limited, so the one provided with this post might be too busy to respond to your GET requests if this post is popular on any given day.
Twilio account – Although not required for this tutorial, if you sign up for a free Twilio trial account with this link you will receive an additional $10 credit when you convert to a regular account.
In addition to these tools, you should also have a working knowledge of JavaScript basics and some exposure to JavaScript Promises, the async
and await
keywords, and RxJS Observables.
There is a companion repository containing the complete source code for this project on GitHub.
Setting up the Node.js project
Open a console window in the directory where you’d like to locate the project directory, then use the following command-line instructions to create the project directory, initialize a Git repo, and install the necessary npm modules: