Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the correct way to use concat along with pipe in Rxjs 6?

I have a server call which may return HTTP 202. Influenced by this SO thread, I have the following:

this.http.get(url)
  .pipe(
    map(response => {
      if (response.status === 202) {
        throw response;
      }
      return response;
    }),
    retryWhen(errors => {
      return errors.pipe(
        delay(1000),
        take(3),
        concat(response => Observable.throw('Retries exceeded'))
      );
    }),
    catchError(handleError)
  );

Getting a deprecated warning on the use of concat. I understand the new concat is in rxjs and not rxjs/operator.

But, what is the right way to use the new static concat operator here?

Found the following from this site

import { concat } from 'rxjs/operators';
a$.pipe(concat(b$, c$));

// becomes

import { concat } from 'rxjs';
concat(a$, b$, c$);

I'm not able to wrap my head around which Observables are being concatenated in my example code?

UPDATE 1

Changed the code to:

return concat(this.http.get(url)
  .pipe(
    map(response => {
      if (response.status === 202) {
        throw response;
      }
      return response;
    }),
    retryWhen(errors => {
      return errors.pipe(
        delay(1000),
        take(3)
      );
    }),
    catchError(handleError)
  ), response => Observable.throw('Retries exceeded'));

But this results in:

core.js:1598 ERROR TypeError: You provided 'function (response) { return rxjs__WEBPACK_IMPORTED_MODULE_2__["Observable"].throw('Retries exceeded'); }' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
at subscribeTo (subscribeTo.js:41)
at subscribeToResult (subscribeToResult.js:6)
at 
like image 205
kmansoor Avatar asked Jul 27 '18 22:07

kmansoor


People also ask

What is concat operator in RxJS?

The RxJS concat() operator is a join operator that creates an output Observable, which sequentially emits all values from the given Observable and then proceed to the next one.

What does pipe () do RxJS?

Pipes let you combine multiple functions into a single function. The pipe() function takes as its arguments the functions you want to combine, and returns a new function that, when executed, runs the composed functions in sequence.

What is the use of pipe in Observable?

The pipe method of the Angular Observable is used to chain multiple operators together. We can use the pipe as a standalone method, which helps us to reuse it at multiple places or as an instance method.

How many operators are in RxJS?

There are over 100 operators in RxJS that can be classified into various categories, including creation, transformation, filtering, joining, multicasting, error handling, and utility.


1 Answers

Pipeable operators are just functions that take an observable and return an observable. So you can use the concat factory function like this:

retryWhen(errors => {
  return errors.pipe(
    delay(1000),
    take(3),
    o => concat(o, throwError('Retries exceeded'))
  );
})

Also, the concat operator is going to be replaced with/renamed to concatWith. See this issue.

like image 184
cartant Avatar answered Sep 22 '22 03:09

cartant