React与Redux中API顺序调用：多图片逐个上传实现方案

你当前的并行上传逻辑存在两个问题：一是forEach不会返回Promise数组，外层的Promise.all其实没起到作用；二是forEach会同步触发所有异步上传请求，导致并行执行。要实现等待前一张上传完成后再发起下一张的顺序上传，只需要把并行触发逻辑改成逐个await的循环即可，具体修改如下：

修改后的代码 #

export const uploadPhotos =
  ({ photos, size, controller }) =>
  async (dispatch) => {
    // 统一触发一次上传开始的action，避免重复触发（可根据状态管理需求调整）
    dispatch({ type: constants.UPLOAD_PHOTOS_START, size });

    // 使用for...of循环配合entries()获取索引与图片，逐个await保证顺序执行
    for (const [index, photo] of photos.entries()) {
      const formData = new FormData();
      formData.append("photo", photo);

      try {
        const response = await axios.post(
          `${API_URL}/photos/upload`,
          formData,
          {
            onUploadProgress({ loaded, total }) {
              dispatch(setUploadProgress({ id: index, loaded, total }));
            },
            signal: controller.signal,
          }
        );

        dispatch({
          type: constants.UPLOAD_PHOTOS_SUCCESS,
          payload: response.data,
        });
      } catch (error) {
        dispatch({
          type: constants.UPLOAD_PHOTOS_FAILURE,
          payload: error,
        });
        // 可选：如果某一张上传失败后需要终止后续上传，添加return即可
        // return;
      }
    }
  };

// 以下代码保持原有逻辑不变
export const setUploadProgress = (progress) => ({
  type: constants.SET_UPLOAD_PROGRESS,
  payload: progress,
});

export const resetUploadData = () => ({
  type: constants.RESET_UPLOAD_DATA,
});

export const setOverallSize = (data) => ({
  type: constants.SET_OVERALL_SIZE,
  payload: data,
});

修改说明 #

• 替换并行逻辑：去掉Promise.all和forEach，改用for...of循环遍历图片数组，每次循环内await上传请求，确保只有当前请求完成（成功或失败）后，才会发起下一张图片的上传。
• 优化状态触发：把UPLOAD_PHOTOS_START的dispatch移到循环外，避免每张图片上传都重复触发该action（若你的状态逻辑需要每次上传单独触发，可移回循环内）。
• 保留原有功能：进度更新、错误处理、请求取消信号（controller.signal）的逻辑完全保留，同时保证了顺序执行的核心需求。
• 失败后控制选项：如果需要在某一张上传失败时停止后续上传，只需在catch块中添加return语句即可。

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