使用Axios时async/await未等待响应的问题求助

核心原因：未配置Redux Thunk中间件 #

你的异步Action（createUser）依赖Redux Thunk中间件处理异步逻辑，如果Store没有正确配置该中间件，dispatch会直接执行函数而不等待异步操作完成，导致后续代码提前执行。

解决步骤 #

1. 安装redux-thunk
   在项目根目录执行：

npm install redux-thunk
# 或
yarn add redux-thunk

2. 配置Store时添加Thunk中间件
   修改Store创建代码，确保应用thunk中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // 你的根reducer文件

const store = createStore(
  rootReducer,
  applyMiddleware(thunk) // 关键：添加thunk中间件处理异步Action
);

export default store;

代码优化建议 #

createUser作为async函数会自动返回Promise，无需手动调用Promise.resolve/Promise.reject，可简化代码：

export const createUser = (data) => async (dispatch) => {
    try {
        const res = await axios.post('http://localhost:8080/save', data);
        dispatch({
            type: CREATE_USER,
            payload: res.data
        });
        return res.data; // 直接返回数据，async函数会自动包装为resolved状态的Promise
    } catch(err) {
        console.log(err);
        throw err; // 抛出错误，async函数会自动包装为rejected状态的Promise
    }
}

验证步骤 #

1. 打开浏览器Network面板，确认http://localhost:8080/save请求处于pending状态（对应服务器断点暂停）。
2. 恢复服务器断点后，检查是否能正常进入.then回调打印响应数据。

内容的提问来源于stack exchange，提问作者Abhilash Mangalan