Execute function once the service call has finished

Question

Execute function once the service call has finished

Having a service function that needs to be called

private callService() {
   this.functionOne();
   this.functionTwo();
   this.functionThree();
}

private getOtherInfo() {
   // pure sync here
   this.getId(this.user['data']);
   this.getType(this.name['data']);
}

The aim is to run callService first and then getOtherInfo, but encountering issues reaching the second function.

The functions within callService are structured as below:

private functionOne() {
    this.user['loading'] = true;
    this.service['user'].get().subscribe(data => {
    this.user['data'] = data;
   }
}

private functionTwo() {
    this.name['loading'] = true;
    this.service['name'].get().subscribe(data => {
    this.name['data'] = data;
   }
}
.....

To address the problem, I modified the function like so:

private callService(): Promise<any> {
     return Promise.resolve() => {
      this.functionOne();
      this.functionTwo();
      this.functionThree();
     });
}

Within ngOnInit() the following logic is implemented:

this.callService().then(()=> this.getOtherInfo());

Despite these changes, the second function remains unreachable.

angular typescript rxjs

Answer 1

Answer №1

There is a solution to all this using observables instead of relying on promises...

You should update your three functions as follows:

private functionOne() {
    this.user['loading'] = true;
    return this.service['user'].get();
}

private functionTwo() {
    this.name['loading'] = true;
    return this.service['name'].get();
}

Modify your callService method like this:

private callService(): Promise<any> {
     forkJoin(
      this.functionOne(),
      this.functionTwo(),
      this.functionThree()
     ).subscribe(([user, name, fnThreeData]) => {
       this.user['data'] = user;
       this.name['data'] = name;
       //deal with fnThreeData here
       this.getOtherInfo();
     });
}

Avoid mixing promises and other methods, rxjs has everything you need. Embracing rxjs will make your life easier in Angular.

Answer 2

There is a solution to all this using observables instead of relying on promises...

You should update your three functions as follows:

private functionOne() {
    this.user['loading'] = true;
    return this.service['user'].get();
}

private functionTwo() {
    this.name['loading'] = true;
    return this.service['name'].get();
}

Modify your callService method like this:

private callService(): Promise<any> {
     forkJoin(
      this.functionOne(),
      this.functionTwo(),
      this.functionThree()
     ).subscribe(([user, name, fnThreeData]) => {
       this.user['data'] = user;
       this.name['data'] = name;
       //deal with fnThreeData here
       this.getOtherInfo();
     });
}

Avoid mixing promises and other methods, rxjs has everything you need. Embracing rxjs will make your life easier in Angular.

Answer 3

Answer №2

The current code seems to have some issues. The functions like functionOne, functionTwo, etc., are not actually returning promises and there is no return statement at all. Also, the .subscribe method is used but its result is not being utilized. By wrapping the functions in promises and resolving them correctly, you should be able to await their results without any problems:

For instance:

private functionOne() {
    return new Promise( (resolve, reject) => {
        this.user['loading'] = true;
        this.service['user'].get().subscribe(data => {
            this.user['data'] = data;
            resolve();
        });
    });
}

private functionTwo() {
    return new Promise( (resolve, reject) => {
       this.name['loading'] = true;
       this.service['name'].get().subscribe(data => {
           this.name['data'] = data;
           resolve();
       });
   });
}

private callService(): Promise<any> {
     return new Promise( async (resolve, reject) => {
      await this.functionOne();
      await this.functionTwo();
      await this.functionThree();
     });
});

This is a structural example of how it can be implemented (not specific to Angular):

function functionOne() {
return new Promise( (resolve, reject) => {
  setTimeout( () => resolve('return from function 1'), 1000);
  })
}
function functionTwo() {
return new Promise( (resolve, reject) => {
  setTimeout( () => resolve('return from function 2'), 1000);
  })
}

async function callAllFunctions() {
const result1 = await functionOne();
  console.log(result1);
  const result2 = await functionTwo();
  console.log(result2);
}

callAllFunctions().then( () => console.log('finished'));

Answer 4

The current code seems to have some issues. The functions like functionOne, functionTwo, etc., are not actually returning promises and there is no return statement at all. Also, the .subscribe method is used but its result is not being utilized. By wrapping the functions in promises and resolving them correctly, you should be able to await their results without any problems:

For instance:

private functionOne() {
    return new Promise( (resolve, reject) => {
        this.user['loading'] = true;
        this.service['user'].get().subscribe(data => {
            this.user['data'] = data;
            resolve();
        });
    });
}

private functionTwo() {
    return new Promise( (resolve, reject) => {
       this.name['loading'] = true;
       this.service['name'].get().subscribe(data => {
           this.name['data'] = data;
           resolve();
       });
   });
}

private callService(): Promise<any> {
     return new Promise( async (resolve, reject) => {
      await this.functionOne();
      await this.functionTwo();
      await this.functionThree();
     });
});

This is a structural example of how it can be implemented (not specific to Angular):

function functionOne() {
return new Promise( (resolve, reject) => {
  setTimeout( () => resolve('return from function 1'), 1000);
  })
}
function functionTwo() {
return new Promise( (resolve, reject) => {
  setTimeout( () => resolve('return from function 2'), 1000);
  })
}

async function callAllFunctions() {
const result1 = await functionOne();
  console.log(result1);
  const result2 = await functionTwo();
  console.log(result2);
}

callAllFunctions().then( () => console.log('finished'));

Execute function once the service call has finished

Answer №1

Answer №2

Similar questions

Using ngFor in Angular 2-5 without the need for a div container wrapping

Did Jscript.net already offer many of the same features as TypeScript?

Angular HTTP Client: Akin to utilizing curl with the --user flag for basic authentication

There appears to be an issue with the headers not being

The error message TS2304 is indicating that the name 'Set' cannot be found in electron-builder

Optimal strategies for managing subscriptions in Angular

Guide to hosting an Angular 2 client app and Node server app simultaneously on one server

Implementing conditional wildcard route redirection in an Angular routing module

Troubleshooting a NextJs/TS problem with importing ESM modules

What strategies can you employ in Angular to reverse the outcome of a guard using canActivate?

Unsure about module loading with system.js and navigating Typescript

Unable to assign the selected attribute to a dynamically loaded Ion-select component in Ionic 2

Having trouble getting the Rxjs filter operator to work properly with Angular 2 Observables

What could be causing the ng-if function to continuously loop?

Encountering continuous loops during the resolution of sinon, hindering the ability to conduct proper unit testing in node

Tips for minimizing delay after user input with Material UI

Manipulate streams using pipes

In JavaScript, sort the array of objects based on the key name

Converting an HTML page to PDF with Angular using jsPdf and Html2Canvas

Troubleshooting: Vue.js component events not being detected in TypeScript