Invoke a class method once the Promise has been successfully resolved

Question

Invoke a class method once the Promise has been successfully resolved

I'm facing an issue with my simple class

class A{
  constructor(){
   this.loadComponents().then(function(values) {callbackOnLoad();});
  }

  callbackOnLoad(){
  //do some things
  }

  loadComponents(){
    ...
    return Promise.all([p1,p2,p3,p4,p5,p6,p7,p8]);
  }
}

I need help solving a problem where I can't call callbackOnLoad after all promises are fulfilled. I understand that "this" depends on the caller, causing callbackOnLoad not to work as expected. How should I structure or design my code to overcome this obstacle?

javascript es6-promise

Answer 1

Answer №1

A good practice would be to immediately follow Promise.all with a call to both then and catch.

class B{
  constructor() {
    this.loadAssets();
  }

  handleLoad = () => {
    //perform necessary actions
  }

  loadAssets = () => {
    return Promise.all([asset1, asset2, asset3, asset4, asset5]).then((values) => {
      this.handleLoad();
    }).catch((err) => {
      console.log(err);
    });
  }
}

Answer 2

A good practice would be to immediately follow Promise.all with a call to both then and catch.

class B{
  constructor() {
    this.loadAssets();
  }

  handleLoad = () => {
    //perform necessary actions
  }

  loadAssets = () => {
    return Promise.all([asset1, asset2, asset3, asset4, asset5]).then((values) => {
      this.handleLoad();
    }).catch((err) => {
      console.log(err);
    });
  }
}

Invoke a class method once the Promise has been successfully resolved

Answer №1

Similar questions

What is the best method for ensuring that cheese rises to the top?

Managing Input Type Dropdown Selections Using Jquery

Should you make multiple API calls or just one?

Using CSS and JavaScript to hide a div element

Pressing the button results in no action

What is the most effective way to use checkboxes to apply multiple filters to an array of objects?

Encountering a runtime error in React while making an async call on a NextJS 13 page

Creating functional dropdown menus with popperjs in the latest Bootstrap version 5

I am currently facing a challenge in React Highcharts where I am unable to remove and redraw the graph easily

How to use the window.confirm method to print the HTML tag in an AJAX post

Issues arise with transferring React component between different projects

Sharing information between controllers while being initiated using $rootScope.$emit

What could be causing the slow loading time of my Shopify App developed using Next.js (React)?

Tips for successfully transferring an image through an XMLHttpRequest

Cut off all information beyond null characters (0x00) in Internet Explorer AJAX responses

Bootstrap modal's offset returning blank value

Refreshing a Node.js server page upon receiving a JSON update

How can we incorporate a Material-UI skeleton to display API response data effectively?

"Endowed with improper dimensions, the BootStrap collapse feature

Passing parameters to an Angular 2 component