javascript - 在 React 中使用 ActionReducers 链接 Promise

Question

我有一个方法，它向 API 发出两个 http 请求来获取数据。

getServerDetails(this.props.match.params.id) //1
            .then(res => {
                this.props.getServerDetailsAction({ success: true, data: res.data })

                if (!_.isEmpty(res.data)) {
                    return getServerScomAlerts(res.data.ServerName) //2
                }
            })
            .catch((err) => { //3
                this.props.getServerDetailsAction({ success: false, error: err })
            })
            .then(res => {
                if (!_.isEmpty(res)) {
                    this.props.getServerScomAlertsAction({ success: true, data: res.data })
                }
            })
            .catch((err) => { //4
                this.props.getServerScomAlertsAction({ success: false, error: err })
            })

getServerDetails (1) 和 getServerScomAlerts (2) 方法正在返回 Promise。 getServerScomAlerts (2) 取决于 getServerDetails (1)

的结果

问题是，如果 getServerScomAlerts (2) 中发生错误，则执行第一个 catch block (3)。有没有办法从第一个方法 (1) 获取数据(无需访问存储)，同时跳转到对应的catch block (4)如果发生错误？

Answer 1

这样的事情可能会让您了解如何实现您的目标。您可以使用 async/await 来代替嵌套，它会等待每个调用的结果，然后再继续下一个:

export const actionCreators = {
    myFunc: (param1, param2) => async (dispatch, getState) => {
        try {
            const response1 = await fetch(param1);
            const data1 = await response.json();

            const response2 = await fetch(param2);
            const data2 = await response2.json();

        } catch (err) {
            console.log(err);
        }
    }
}