CODEWITHSUNDEEP
javascriptreactjsmobx
darKnight
darKnight

Reputation: 6481

Execute function statement only after promise is resolved

I have the following code which fetches some data by implementing promises.

var TreeDataService = new DataService();

export default class TreeStore {
    treeData = [];

    getData() {
        TreeDataService.get().then(data => {
            this.treeData = data;
        },
            () => {
                alert("Error fetching data");
            });
        return this.treeData; //this returns empty array instead of returning the data fetched from TreeDataService.get
    }
}

How can I make return this.treeData execute only after the promise is fully resolved? I know I can put return this.treeData inside then's success method and return the entire getDatamethod as a promise, but that will require again resolving the promise at the call site of getData.

EDIT: I understand that as it's a async operation, I cannot synchronously execute the return statement and can instead return a promise. But then how do I resolve that promise at call site? I am facing the same issue at calling code:

export default class App extends React.Component {

  treeData = TreeStoreObj.getData().then(data => {
    return data;
  }); // This will also execute asynchronously, so will be initially empty.

  render() {
    return (
      <div className="app-container">
        <TreeNode node={this.treeData} /> // So this will also be empty
      </div>
    );
  }
}

Earlier code will now be:

export default class TreeStore {
    treeData = [];

    return getData() {
        TreeDataService.get().then(data => {
            return this.treeData = data;
        },
            () => {
                alert("Error fetching data");
            });
    }
}

Upvotes: 2

Views: 3965

Answers (2)

farwayer
farwayer

Reputation: 4122

You are doing something strange. getData should not return any value at all if you are using mobx. It should set store observable only. React component will automatically rerender when this observable value change.

Are you using mobx-react? If so show your integration code. If not try to use it ;)

Upvotes: 1

Alina Loi
Alina Loi

Reputation: 184

Async model does not allow you to execute return this.treeData after the promise is resolved. However, you might want to cache the promise not to invoke TreeDataService.get() several times.

For example (untested, just trying to show the main idea):

export default class TreeStore {
    treeData = [];
    treeDataPromise = null;

    getData() {
        if (this.treeDataPromise) return this.treeDataPromise;
        this.treeDataPromise = TreeDataService.get().then(data => {
            this.treeData = data;
            return this.treeData;
        },
            () => {
                alert("Error fetching data");
            });
        return this.treeDataPromise;
    }
}

Another option is to check if this.treeData is loaded, and return Promise.resolve(this.treeData) if this is the case.

Upvotes: 1

Related Questions