ajaxrxjsrxjs-pipeable-operators

How to prevent RxJS to stop pipeline execution on the first exception


I'm trying to make 3 sequential GET requests using RxJS ajax operator. If one of the ajax requests throws an error(404 status code, for example), the rest won't execute. Is it possible pipeline to execute all the ajax requests, even if for some of the URLs it will throw an exception?

 let urls =
    from
      ([
        "http://localhost:8000/good-url", // good URL
        "http://localhost:8000/wrong-url", // error 404
        "http://localhost:8000/another-good-url" // good URL, ajax request won't execute
      ])
      .pipe
      (
        map((url) => rxjs.ajax.ajax({
          method: "GET",
          url: url,
          responseType: 'text'
        }))
      );
    urls.pipe(
        concatAll(), 
        catchError(err => { console.log("error: ", err); return rxjs.of({}); }))
    .subscribe
    (
      response => { console.log("status: ", response.status); }
    );

catchError operator is displaying the corresponding ajax error 404 info in dev tools console


Solution

  • We can move the catchError inside the ajax Observable using pipe. Then use concatAll alone for the outer pipe.

    The catchError handles the failure and ensures the API stream continues.

    import './style.css';
    
    import { rx, map, from, of, catchError, concatAll } from 'rxjs';
    import { ajax } from 'rxjs/ajax';
    let urls = from(
      [
        'https://jsonplaceholder.typicode.com/todos/1', // good URL
        'https://jsonplaceholder.typicode.com/todosqqwrqewr/2', // error 404
        'https://jsonplaceholder.typicode.com/todos/3', // good URL, ajax request won't execute
      ].map((url) =>
        ajax({
          method: 'GET',
          url: url,
          responseType: 'text',
        }).pipe(
          catchError((err: any) => {
            console.log('error: ', err);
            return of({});
          })
        )
      )
    )
      .pipe(concatAll())
      .subscribe((response: any) => {
        console.log('status: ', response);
      });
    

    Stackblitz Demo


    Using Map:

    We can also achieve using the below alternative code, same concept. We move the catchError inside the map so that the inner stream is error handled, not affecting the outer main stream.

    import './style.css';
    
    import { rx, map, from, of, catchError, concatAll } from 'rxjs';
    import { ajax } from 'rxjs/ajax';
    let urls = from([
      'https://jsonplaceholder.typicode.com/todos/1', // good URL
      'https://jsonplaceholder.typicode.com/todosqqwrqewr/2', // error 404
      'https://jsonplaceholder.typicode.com/todos/3', // good URL, ajax request won't execute
    ])
      .pipe(
        map((url: any) =>
          ajax({
            method: 'GET',
            url: url,
            responseType: 'text',
          }).pipe(
            catchError((err: any) => {
              console.log('error: ', err);
              return of({});
            })
          )
        ),
        concatAll()
      )
      .subscribe((response: any) => {
        console.log('status: ', response);
      });
    

    Stackblitz Demo