javascript - 如何在 Redux 操作中的 Promise 中发出多个 API 请求

Question

我正在一个项目中使用 React/Redux，我需要发出 2 个单独的 API 请求，但第二个请求取决于第一个返回而没有任何问题。在下面的操作示例中，我试图将两个调用都包装在一个 Promise 中，但它并不能正常工作（Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.在控制台中出现错误）。由于这两个调用，我不一定需要对响应数据做任何事情。我只需要他们返回 200 状态或错误。

注意：不幸的是，我不能在这个例子中使用 async/await。谢谢！

export default () => {
    const url = '/api';
    const options = {...}
    const otherOptions = {...}

    return new Promise((resolve, reject) => {
        return dispatch =>
            // First API request
            axios.post(url, options)
                .then(responseA => dispatch({ type: RESPONSE_A_SUCCESS }))
                .then(() =>
                    // Second separate API request

                    axios.post(url, otherOptions)
                        .then(responseB => { 
                            dispatch({ type: RESPONSE_B_SUCCESS });
                            resolve();
                         })
                )
                .catch(error => {
                    dispatch({ type: errorActionType, error: error });
                    reject(error);
                });
    });
};

Answer 1

您的代码有 2 个问题：

1. 它返回一个promise，它不是一个“普通对象”。
2. 您正在嵌套承诺而不是按顺序附加它们

试试这个：

export default () => {
    const url = '/api';
    const options = {...}
    const otherOptions = {...}

    return dispatch =>
        axios.post(url, options)
            .then(responseA => dispatch({ type: RESPONSE_A_SUCCESS }))
            .then(() => axios.post(url, otherOptions))
            .then(responseB => dispatch({ type: RESPONSE_B_SUCCESS }))
            .catch(error => {
                dispatch({ type: errorActionType, error: error });
                reject(error);
            });
    });
};