仅在解决承诺后才执行功能语句

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执行？我知道我可以将return this.treeData放入然后在然后的成功方法中，然后将整个getData方法作为承诺，但这需要再次解决getData的呼叫网站上的承诺。

编辑：我理解，由于这是一个异步操作，因此我不能同步执行返回语句，而是可以返回承诺。但是，我该如何解决呼叫网站的承诺？我在通话代码上面临同样的问题：

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

您正在做一些奇怪的事情。如果您使用MOBX，getData根本不应返回任何值。它应该仅设置可观察的商店。当可观察到的价值变化时，React组件将自动呈现。

您是否正在使用MOBX反应？如果是这样，则显示您的集成代码。如果不尝试使用;(

Answer 2

async模型在解决承诺后不允许您执行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是否已加载，如果是这种情况，请返回Promise.resolve(this.treeData)。