Question

我有以下代码通过实现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
    }
}

如何在承诺完全解决后才能执行return this.treeData？我知道我可以将return this.treeData放在那个成功方法中，并将整个getData方法作为承诺返回，但这需要在getData的调用站点再次解析承诺。

编辑：我理解，因为它是一个异步操作，我不能同步执行return语句，而是可以返回一个promise。但是，我如何在呼叫站点解决这个承诺？我在调用代码时面临同样的问题：

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，如果是这种情况，则返回Promise.resolve(this.treeData)。

Answer 2

你做的事情很奇怪。如果您使用mobx，getData根本不应返回任何值。它应该只设置store observable。当此可观察值更改时，React组件将自动重新呈现。

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

仅在解析promise后执行函数语句

2 个答案: