Javascript 我应该如何在React容器组件中进行API调用？

目前，我有一个

React-Redux

应用程序，其中存储了大量状态项。我已设置操作以从后端API填充状态。我使用容器和表示组件，在我的容器中，我使用

mapDispatchToProps

获取其子对象所需的所有状态，然后使用

MapStateTrops

将状态作为道具传递下去

目前，我正在容器组件中进行这些初始API调用：

componentDidMount() {
    this.props.getResources()
        .then(() => {
            this.props.getUsers()
                .then(() => {
                    this.props.getComments()
                        .then(() => {
                            this.props.getFiles()
                                .then(() => {
                                    this.props.getAlts()
                                        .then(() => {
                                            this.props.getSubjects()
                                                .then(() => {
                                                    this.props.getTemplates()
                                                        .then(() => {
                                                            this.props.getResourceTags()
                                                                .then(() => {
                                                                    this.setState({
                                                                        resourcesLoaded: true
                                                                    });
                                                                });
                                                        });
                                                });
                                        });
                                });
                        });
                });
        });
}

---

这看起来很可笑。有没有更干净的方法来发出这些API请求或重构我的操作，以便将它们浓缩到单个操作中？

您可以使用

async-await

而不是回调模式。这是ES6的一个特性

例如：

async componentDidMount() {
    try {
        await this.props.getResources()
        await this.props.getComments()
        await this.props.getFiles()
        await this.props.getAlts()
        await this.props.getSubjects()
        await this.props.getTemplates()
        await this.props.getResourceTags()
        this.setState({
            resourcesLoaded: true
        })
    } catch (e) {
        // in case any function above causes error
    }
}

---

使用

Promise.all

componentDidMount() {
    Promise.all([
        this.props.getResources(),
        this.props.getComments(),
        this.props.getFiles(),
        this.props.getAlts(),
        this.props.getSubjects(),
        this.props.getTemplates(),
        this.props.getResourceTags()
    ]).then(() =>
        this.setState({ resourcesLoaded: true })
    )
}

使用

Promise.all

而不是

await

的好处是

await

在

Promise.all时连续运行每个函数/承诺。all

同时运行所有函数

详细说明

所以当我们使用

await getResources()
await getComments()
...
...

wait

关键字将等待

getResources（）

完成，然后运行

getComments（）

并等待其完成，这将继续

---

当使用

Promise.all

时，它将一次运行所有函数，并等待每个函数执行，然后才运行

。然后（…）

部分

考虑使用

Promise.all

，看看这里为什么要创建这么多单独的承诺链？您可以将其全部展开为

this.props.getResources（）。然后（（）=>this.props.getUsers（））。然后（…）

或者，如果下一步不需要前面的结果，请使用

Promise.all（[this.props.getResources（），this.props.getUsers（），…]）。然后（…）

。让componentDidMount安装一个异步函数的原因是什么？嘿@Tehloltractor，这是因为我们在该函数中使用了

wait

（实际上这不是必需的，现在删除它）。谢谢你指出这一点