如何处理React Redux中Action返回的Promise并实现结果提示

第一步：修正uploadFile异步Action代码 #

原代码里await axios.post搭配then/catch会导致response变量变为undefined，且错误未正确抛出，导致createAsyncThunk无法识别失败状态，改用try/catch结构更合理：

export const uploadFile = createAsyncThunk(
  "simulation/uploadFile",
  async (filesSelected) => {
    console.log(filesSelected[0].name + " 即将上传");

    const formData = new FormData();
    // 注：原代码中filesSelected是数组的话，filesSelected.name不存在，需根据实际需求调整键名或取值
    formData.append(filesSelected.name, filesSelected);
    formData.append("dcmFile", filesSelected[0]);
    formData.append("mdfFile", filesSelected[1]);
    formData.append("modelFile", filesSelected[2]);

    try {
      const response = await axios.post("http://localhost:8000/simulation/start/", formData);
      console.log(response);
      return response.statusText;
    } catch (err) {
      console.log(err);
      // 抛出错误，让createAsyncThunk进入rejected状态
      throw err;
    }
  }
);

第二步：在组件中等待dispatch完成并显示提示 #

触发dispatch时需传入文件参数，并用await等待执行完成，同时处理成功/失败场景：

// 在React组件的异步函数中调用
const handleUpload = async (selectedFiles) => {
  try {
    // 传入文件参数，用unwrap()获取成功结果
    const result = await dispatch(uploadFile(selectedFiles)).unwrap();
    alert(`上传成功：${result}`);
  } catch (err) {
    alert(`上传失败：${err.message || "未知错误"}`);
  }
};

// 调用示例（绑定到文件选择事件等）
// handleUpload(你的文件数组);

备选写法（不用unwrap） #

如果不习惯unwrap()，也可以直接通过Promise的then/catch判断状态：

dispatch(uploadFile(selectedFiles))
  .then((action) => {
    if (action.meta.requestStatus === "fulfilled") {
      alert(`上传成功：${action.payload}`);
    }
  })
  .catch((err) => {
    alert(`上传失败：${err.message || "未知错误"}`);
  });

内容的提问来源于stack exchange，提问作者Fares Saleh