Combine two streams under certain conditions using RxJs

Question

Combine two streams under certain conditions using RxJs

When working with streams, I am facing a scenario where I have two server calls to make in order to get the required response. However, if the first call returns data, I do not want to execute the second call. I have been struggling to find the proper combination of operators to cancel the second request upon the success of the first one without throwing an error.

I attempted using defaultIfEmpty, but it felt like a hack and I was not satisfied with this approach.

I have prepared a StackBlitz example that you can view here. I am unsure if this is considered good practice or not. Essentially, what I need is a conditional concatMap.

If you are aware of how to achieve this using existing operators without creating new ones, I would appreciate hearing about your solutions and approaches.

Thank you in advance.

angular typescript rxjs

Answer 1

Answer №1

When dealing with async requests that are of type Observable<T> and only return a value T on success, you can simplify the process by using .concat():

firstAsyncCall()
  .concat(secondAsyncCall())
  .take(1)

By adding .take(1), you ensure that secondAsyncCall() will not be triggered if firstAsyncCall returns (at least) one value.

Answer 2

When dealing with async requests that are of type Observable<T> and only return a value T on success, you can simplify the process by using .concat():

firstAsyncCall()
  .concat(secondAsyncCall())
  .take(1)

By adding .take(1), you ensure that secondAsyncCall() will not be triggered if firstAsyncCall returns (at least) one value.

Answer 3

Answer №2

To halt the stream when a value no longer fits your criteria, utilize the filter function:

https://example.com/edit/typescript-abc123?file=index.ts

const interval$ = interval(100);

interval$.pipe(
  filter(val => val % 10 === 0),
  take(10),
).subscribe(val => console.log(val));

Answer 4

To halt the stream when a value no longer fits your criteria, utilize the filter function:

https://example.com/edit/typescript-abc123?file=index.ts

const interval$ = interval(100);

interval$.pipe(
  filter(val => val % 10 === 0),
  take(10),
).subscribe(val => console.log(val));

Combine two streams under certain conditions using RxJs

Answer №1

Answer №2

Similar questions

Is it possible to stop Angular requests from being made within dynamic innerhtml?

React.js - Issue with table not being redrawn after data filtering

Ways to verify the presence of isBrowser in Angular 4

Working with Angular to add various items to an array based on multiple conditions

Can a form be submitted using ViewChild in Angular5?

Creating a cohesive "notification" feature in React with TypeScript that is integrated with one specific component

Sharing packages within nested scopes

Why am I getting the "Cannot locate control by name" error in my Angular 9 application?

Jest test encounters an error due to an unexpected token, looking for a semicolon

Unable to circumvent the Angular sanitize security measures

How can we declare and showcase a generic object with an unspecified number and names of keys in React using TypeScript?

Error: Model function not defined as a constructor in TypeScript, mongoose, and express

Following the Angular 6 update, a new error message "Error: Expected to find an ngsw-config.json configuration file" appears when running the ng build --prod command

Angular interceptor allows the execution of code after the outgoing request has completed its process

Error message displayed: "There was an issue locating (undefined) and (undefined) while attempting to run Angular-CLI command 'ng g c my-new-component'."

What causes the ngIf directive to update the view of an HTTP observable only upon reloading the page?

What is the best method for comparing arrays of objects in TypeScript for optimal efficiency?

Developing dynamic-sized tuples in TypeScript

Navigating Using URL Paths in Angular 2 Application

Twilio CORS Angular HttpClient Integration