This is the 28th day of my participation in the August Challenge

preface

To talk about RxJS, we need to talk about Reactive Extensions (Rx), which is a programming pattern designed to operate on asynchronous collections. . RxJS is an implementation of the Javascript language Reactive Extensions (Rx). RxJS is an implementation of the Javascript language Reactive Extensions (Rx).

What is RxJS?

Concepts from official documentation:

RxJS is a library that uses observable sequences to write asynchronous and event-based programs. It provides a core Observable, dependencies (Observer, Schedulers, Subjects), and operators inspired by [Array#extras] (map, filter, reduce, every, etc.), These array operators treat asynchronous events as collections.

Think of RxJS as Lodash for handling events.

The official documentation introduces many concepts, such as observers, Schedulers, and Subjects, which are not friendly to beginners because they are RxJS concepts. The learning path of RxJS is too steep for most people, and it’s easy to go from getting started to giving up, or even giving up before getting started.

To simplify the concept, RxJS is really a game played between publishers and subscribers.

One of the design patterns is the publish subscribe pattern, and in this pattern,

  • Publishers are only responsible for notification of events
  • Subscribers are only responsible for completing their own business logic after receiving the notification and are not concerned with the source of the message

Everyone responsibility is very clear, but there must be some situation, such as broadcasting is private or public, if the subscriber is late, so whether the previous news need to inform subscriber, to the processing of these cases, RxJS defines a set of complete operator, attention is complete, the all of the world are covered in the operator, You don’t have to reinvent the wheel.

What problem was solved?

RxJS is a game between publishers and subscribers. If you still don’t understand, let’s be more specific.

  1. RxJS is an event handling library for various events, such as DOM clicks, timer firing, and API message fetching
  2. Events need to be subscribed, such as DOM clicks via addEventListener, and API retrieves via registered callback functions

In two steps, we successfully separated publishers and subscribers, but in real business scenarios, subscription and publishing of these events is more complex, involving one-to-many, many-to-one, many-to-many, and so on.

The processing of asynchronous events is more complicated, and many of you have heard of the term “fallback hell.” This refers to an API subscription that needs to be registered with a callback function before there is a promise. Once the API has serial requests, it is easy to write shockwave code like this:

    function getList() {
        request('url', {
            succcess: function(res) {
                request('url', {
                    data: res,
                    succcess: function(res) {
                        request('url', {
                            data: res,
                            succcess: function(res) {
                                // TODO}})}})})}Copy the code

This situation improved after promises became the norm and the later async await became popular for writing asynchronous code synchronously, but in RxJS you will see a different way of coding because promises are also part of another programming paradigm.

import { ajax } from 'rxjs/ajax';
import { concatMap } from 'rxjs/operators';

/* 1. Judge login * 2. Obtain basic information * 3
const order$ = ajax('url') // 1. Determine the login
  .pipe(
    concatMap(isLogin= > ajax('url')), // 2. Obtain basic information
    concatMap(info= > ajax('url')), // 3. Exchange commodity information based on basic information
  )
  .subscribe(goods= > {
      // TODO
  });
Copy the code

summary

This chapter Outlines some basic concepts of RxJS and what problems it can help us solve. In the next article, we will take an in-depth look at the nature of RxJS in combination with real business scenarios.