Search⌘ K
Home
Courses
Build Reactive Websites with RxJS: Master Observables and Wrangle

Promise vs. Observables with AJAX

Explore the distinctions between promises and observables when handling AJAX requests in RxJS. Learn how observables enable multiple values, enhanced error handling, and retries to improve user experience, especially in unstable network conditions. Understand how to integrate promises with observables and why maintaining a consistent abstraction benefits your codebase.

We'll cover the following...

AJAX requests

A question that always comes up when discussing using observables to make AJAX requests is: “Why not promises?” As we learned in Creating Observables, a promise represents a single value delivered overtime where an observable represents multiple values.

An AJAX request is a single value.

Promises vs. observables

Promises are simpler in concept, but the real world always complicates things. Pretend you’re developing the mobile platform for a ridesharing app. Users will typically use the app outside, away from solid Wi-Fi.

They’re trying to get somewhere, so they have a low tolerance for latency and errors. With that in mind, we’ll use the following code to build the best user experience for updating the user on the status of their ride:

TypeScript 3.3.4
let request$ = interval(5000)
.pipe(
  mergeMap(() =>
    ajax('/carStatus.json')
    .pipe(retry(3))
  )
);
let carStatus = request$.subscribe(updateMap, displayError);
// Later, when the car arrives
carStatus.unsubscribe();

This ...