Redux Saga v0.16.2异步请求分批同步执行实现问题

核心思路 #

利用yield all()的阻塞特性（v0.16.2中all会等待所有内部effect完成后才继续执行后续代码），结合for...of循环实现批间串行；通过每个上传任务单独dispatch状态action来弥补all无返回值的缺陷。

具体实现步骤 #

1. 文件分批处理：将所有待上传文件分割为每批最多20个的子数组
2. 串行遍历批次：用for...of循环逐个处理批次，每次yield all()执行当前批的并发上传，等待该批完成后再进入下一批
3. 单独追踪每个文件状态：每个上传任务内部处理成功/失败逻辑，通过dispatch action更新全局状态，替代all返回值的状态追踪

代码示例 #

// 辅助函数：将数组分割为指定大小的批次
const chunkArray = (arr, size) => {
  const chunks = [];
  for (let i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i + size));
  }
  return chunks;
};

// 单个文件上传的子Saga
function* uploadSingleFile(file) {
  try {
    // 触发上传开始的action，更新文件状态为"上传中"
    yield put({ type: 'UPLOAD_FILE_START', payload: { fileId: file.id } });
    
    // 执行实际上传请求
    yield call(api.uploadFile, file);
    
    // 上传成功，更新状态
    yield put({ type: 'UPLOAD_FILE_SUCCESS', payload: { fileId: file.id } });
  } catch (error) {
    // 上传失败，更新状态并记录错误
    yield put({ 
      type: 'UPLOAD_FILE_FAILURE', 
      payload: { fileId: file.id, error: error.message } 
    });
  }
}

// 主上传Saga
function* batchUploadFilesSaga(action) {
  const { files } = action.payload;
  // 分割为每批最多20个文件
  const batches = chunkArray(files, 20);
  
  // 串行处理每个批次
  for (const batch of batches) {
    // 构建当前批次的所有上传effect
    const uploadEffects = batch.map(file => call(uploadSingleFile, file));
    // 等待当前批次所有上传完成（v0.16.2中all是阻塞的，无返回值但会等待全部完成）
    yield all(uploadEffects);
  }
  
  // 所有批次处理完成后触发总完成action
  yield put({ type: 'ALL_UPLOADS_COMPLETED' });
}

关键说明 #

• 批间串行的核心：for...of循环中每次yield all()会阻塞当前saga，直到该批次所有上传任务完成，才会进入下一次循环处理下一批，避免了所有批次同时触发的问题。
• 状态追踪替代方案：由于v0.16.2的all无返回值，通过每个uploadSingleFile内部dispatch的UPLOAD_FILE_START/SUCCESS/FAILURE action来更新全局状态（比如redux store中存储每个文件的上传状态），实现对单个文件上传状态的追踪。
• 错误处理：每个上传任务单独用try/catch捕获错误，确保单个文件上传失败不会中断整个批次的其他任务，也不会影响后续批次的执行。

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