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

Unable to modify headers after they have already been sent to the client - an error has occurred

There was an unexpected token syntax error while trying to assign the database URL from the environment variable "REACT_APP

Update the class name by utilizing template literals

Vue.js parent component not receiving data emitted by child component

React Hooks encountering issues with keydown/up events functionality

jQuery ceases to function once AJAX content is loaded

Using the Rails cocoon gem to populate numerous input fields

Utilizing shared functions defined across different controllers

Tips for choosing elements based on the length of an array

Having trouble with installing create-react-app for my_app using npm because it seems to be stuck on f

Swap out the default URL in components with the global constant

Guide on creating uniform heights and widths for images with varying dimensions utilizing CSS (and percentage values)

Determine which checkbox is currently selected in Vue and send corresponding data based on the checked status

Angular is throwing a RangeError due to exceeding the maximum call stack size

Is this method an effective way to create global states across React components?

Error: Required variable missing in AJAX Post request

Having trouble with utilizing react-select and its menuIsOpen attribute?

It seems that Firefox is ignoring the word-wrap style when the class of a child element is changed

Issues with Twitter-Bootstrap Modal Functionality

Oops! Make sure to explicitly allow the dependency @types/html2canvas by adding it to the "allowedNonPeerDependencies" option