What is the best way to run multiple functions sequentially?

Question

What is the best way to run multiple functions sequentially?

In my project, I am utilizing Angular 10. Within this project, I have implemented two functions named initData1 and initData2.

These are the two functions:

initData1(){
    // Perform HTTP client services

    this.dataService.getTitleImageUrl(this.data.titlId, this.data.id )
    .subscribe( resp => {  this.titleImageUrl = encodeURI(resp.results[0]) });

    this.storeService.getContactImageUrl(this.store.titlId, this.store.id)
    .subscribe( resp => {  this.contactImageUrl = encodeURI(resp.results[0]) });
}


initData2(){
   // Implement additional HTTP client services

    this.dataService.getTitleImageUrl(this.data.titlId, this.data.id )
    .subscribe( resp => {  this.titleImageUrl = encodeURI(resp.results[0]) });

    this.storeService.getContactImageUrl(this.store.titlId, this.store.id )
    .subscribe( resp => {  this.contactImageUrl = encodeURI(resp.results[0]) });
}

The execution of these functions in my component is as follows:

      ngOnInit(): void  {
        initData1();
        initData2();
      }

I am currently seeking a solution on how to ensure that the initData2 function is only executed after all HTTP client services are resolved in the initData1 function.

UPDATE: Included examples of HTTP client services for better understanding.

angular typescript asynchronous rxjs observable

Answer 1

Answer №1

It's highly recommended to utilize the various functions and operators provided by RxJS when working with observables.

Subscribe to observables only where their response is needed
Avoid making unnecessary subscriptions

Based on these principles, here are some suggested modifications to your code:

initData1(): Observable<any> {  // <-- return observable here
  // Use `forkJoin` to trigger multiple observables in parallel
  return forkJoin({
    title: this.dataService.getTitleImageUrl(this.data.titlId, this.data.id),
    contact: this.dataService.getTitleImageUrl(this.data.titlId, this.data.id)
  }).pipe(
    // Utilize `tap` to apply side effects
    tap(imageUrls => {
      this.titleImageUrl = encodeURI(imageUrls.title.results[0]);
      this.contactImageUrl = encodeURI(imageUrls.contact.results[0]);
    })
  );
}

initData2(): Observable<any> {  // <-- return observable here
  // Use `forkJoin` to trigger multiple observables in parallel
  return forkJoin({
    title: this.dataService.getTitleImageUrl(this.data.titlId, this.data.id),
    contact: this.dataService.getTitleImageUrl(this.data.titlId, this.data.id)
  }).pipe(
    // Utilize `tap` to apply side effects
    tap(imageUrls => {
      this.titleImageUrl = encodeURI(imageUrls.title.results[0]);
      this.contactImageUrl = encodeURI(imageUrls.contact.results[0]);
    })
  );
}

You can also employ higher order mapping operators for co-dependent observables to map from one observable to another:

ngOnInit() {
  this.initData1().pipe(
    switchMap(imageUrls => this.initData2())
  ).subscribe(
    response => { 
      // Handle the response from `this.initData2()`
    },
    error => {
      // Manage errors appropriately
    }
  );
}

For more insights on managing nested subscriptions, refer to this link.

Answer 2

It's highly recommended to utilize the various functions and operators provided by RxJS when working with observables.

Subscribe to observables only where their response is needed
Avoid making unnecessary subscriptions

Based on these principles, here are some suggested modifications to your code:

initData1(): Observable<any> {  // <-- return observable here
  // Use `forkJoin` to trigger multiple observables in parallel
  return forkJoin({
    title: this.dataService.getTitleImageUrl(this.data.titlId, this.data.id),
    contact: this.dataService.getTitleImageUrl(this.data.titlId, this.data.id)
  }).pipe(
    // Utilize `tap` to apply side effects
    tap(imageUrls => {
      this.titleImageUrl = encodeURI(imageUrls.title.results[0]);
      this.contactImageUrl = encodeURI(imageUrls.contact.results[0]);
    })
  );
}

initData2(): Observable<any> {  // <-- return observable here
  // Use `forkJoin` to trigger multiple observables in parallel
  return forkJoin({
    title: this.dataService.getTitleImageUrl(this.data.titlId, this.data.id),
    contact: this.dataService.getTitleImageUrl(this.data.titlId, this.data.id)
  }).pipe(
    // Utilize `tap` to apply side effects
    tap(imageUrls => {
      this.titleImageUrl = encodeURI(imageUrls.title.results[0]);
      this.contactImageUrl = encodeURI(imageUrls.contact.results[0]);
    })
  );
}

You can also employ higher order mapping operators for co-dependent observables to map from one observable to another:

ngOnInit() {
  this.initData1().pipe(
    switchMap(imageUrls => this.initData2())
  ).subscribe(
    response => { 
      // Handle the response from `this.initData2()`
    },
    error => {
      // Manage errors appropriately
    }
  );
}

For more insights on managing nested subscriptions, refer to this link.

Answer 3

Answer №2

To seamlessly execute the second function, you can place a call to initData2(); within the response block of the first function.

initData1(){
    this.httpClient.get(yourURL).subscribe(response => {
        initData2();
    })
}

By structuring it in this manner, the functions will be invoked sequentially.

Answer 4

To seamlessly execute the second function, you can place a call to initData2(); within the response block of the first function.

initData1(){
    this.httpClient.get(yourURL).subscribe(response => {
        initData2();
    })
}

By structuring it in this manner, the functions will be invoked sequentially.

What is the best way to run multiple functions sequentially?

Answer №1

Answer №2

Similar questions

Application Initialization Error: appInits is not a valid function

I am interested in incorporating a delete button within my Angular application

Input a new function

Exploring ng-bootstrap: A guide to accessing nested components

Guide on importing an external JavaScript library in Node.js utilizing a TypeScript declaration file

Enhancing Headers in Kendo UI Angular Grid

Disable router history tracking in Angular 2

No versions for "cra-template-typescript" that align with "latest" were located in our cache

Guide to accessing contact list on Ionic framework

Avoiding duplicate subscriptions in Angular 4/5: a guide to streamlining

Error in Angular 8: The type of '[object Object]' is an object, whereas NgFor only supports binding to Iterables such as Arrays

Identifying Gmail line breaks in the clipboard using Angular

Avoid using the Input formControlName in the Angular 6 form

Issues with calling Android Api (Okhttps) in Android versions 9 (Pie) and higher are being encountered

Using React and Typescript, implement an Ant Design Table that includes a Dropdown column. This column should pass

No reply from Axios after using async await

`Why am I unable to achieve the proper body shape with Angular?`

When logging off from an Angular2 application, the OIDC-client does not properly clear the cookies for the MVC application

Creating and utilizing multi-module NPM packages written in Typescript: A comprehensive guide

The error message "Unable to instantiate Jest, Enzyme, React, Next.js, Typescript .default" indicates that the default