JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

JavaScript

const { of } = rxjs;
const { tap, retryWhen, delay } = rxjs.operators;

const server = {
  responseStatus: '500',
  carsData: [
    {
      id: 1,
      name: 'Porsche 911'
    },
    {
      id: 2,
      name: 'Ferrari F40'
    }
  ],
  getData() {
    return of(this.carsData).pipe(
      tap(() => {
        if (!this.responseStatus.startsWith('2')) {
          throw this.responseStatus;
        }
      })
    );
  }
};

const carsData$ = server.getData().pipe(
  retryWhen(errors => {
  console.log(errors);
    return errors.pipe(
      delay(1000),
      tap(errorStatus => {
      console.log(errorStatus)
        if (!errorStatus.startsWith('5')) {
          throw errorStatus;
        }

        console.log('Retrying...');
      })
    )
    }
  )

);

carsData$.subscribe({
  next: console.log,
  error: errorStatus => console.log('Error: ' + errorStatus)
});

const isAuthenticated = () => Math.random() < 0.5;

setTimeout(() => (server.responseStatus = isAuthenticated() ? '200' : '403'), 6000);