只有在承诺被解决后才执行函数语句

Question

我有以下代码，它通过实现承诺来获取一些数据。

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
    }
}

如何让 return this.treeData 仅在 promise 完全解决后才执行？我知道我可以将 return this.treeData 放入 then 的成功方法和 return 整个 getData 方法作为承诺，但这将需要在 getData 的调用站点再次解决承诺.

编辑：我知道这是一个异步操作，我不能同步执行 return 语句，而是 return 一个承诺。但是，我如何在呼叫站点解决该承诺？我在调用代码时遇到同样的问题：

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>
    );
  }
}

之前的代码现在是：

export default class TreeStore {
    treeData = [];

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

Answer 1

异步模型不允许您在承诺解决后执行 return this.treeData。但是，您可能希望缓存不会多次调用 TreeDataService.get() 的承诺。

例如（未经测试，只是想展示主要思想）：

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;
    }
}

另一种选择是检查 this.treeData 是否已加载，如果是 return Promise.resolve(this.treeData)。

Answer 2

你正在做一些奇怪的事情。如果您使用的是 mobx，getData 不应该 return 任何值。它应该只设置商店可观察。当此可观察值发生变化时，React 组件将自动重新呈现。

你在使用 mobx-react 吗？如果是这样，请显示您的集成代码。如果没有尝试使用它 ;)

只有在承诺被解决后才执行函数语句

Execute function statement only after promise is resolved

javascript

reactjs

mobx