如何在redux-observable中并发AJAX请求并关联schemaName与schema？

嘿，我完全懂你遇到的困扰——并行发起REST请求后，返回的结果数组顺序乱掉，导致没法把schemaName和对应的schema正确关联起来对吧？之前用Redux-Observable写epic的时候我也踩过这个坑，给你分享几个实用的解决方案：

核心思路是让每个请求的返回结果都带上它对应的schemaName，这样不管请求返回顺序怎么变，你都能精准把两者关联起来。用RxJS的话可以这么实现：

// 假设你已经有一个获取schema的请求函数 fetchSchema(schemaName)
const fetchSchemasEpic = action$ =>
  action$.ofType(FETCH_SCHEMAS)
    .mergeMap(action => {
      const { schemaNames } = action.payload;
      
      // 为每个schemaName创建带标识的请求
      const schemaRequests = schemaNames.map(name => 
        fetchSchema(name)
          .pipe(
            // 把schemaName和返回的schema绑定成一个对象
            map(schema => ({ schemaName: name, schema }))
          )
      );

      // 并行发起所有请求，收集结果
      return forkJoin(schemaRequests)
        .pipe(
          map(results => {
            // 将结果数组转换为 { [schemaName]: schema } 的对象
            const schemaMap = results.reduce((acc, item) => {
              acc[item.schemaName] = item.schema;
              return acc;
            }, {});
            
            return fetchSchemasSuccess(schemaMap); // 分发成功action
          })
        );
    });

这个方法的优势在于：

• 保持了并行请求的高效性，不会因为顺序牺牲性能
• 结果的关联性完全不依赖返回顺序，哪怕某个请求延迟或重试，都能正确映射
• 代码逻辑清晰，后续维护也方便

如果你的schemaNames数组长度很小，而且可以接受串行请求（一个请求完成再发下一个），可以用concatMap来强制保持顺序：

const fetchSchemasEpic = action$ =>
  action$.ofType(FETCH_SCHEMAS)
    .concatMap(action => {
      const { schemaNames } = action.payload;
      
      return from(schemaNames)
        .pipe(
          // 串行处理每个schemaName的请求
          concatMap(name => 
            fetchSchema(name).pipe(map(schema => ({ schemaName: name, schema })))
          ),
          // 把所有串行结果收集成数组
          toArray(),
          map(results => {
            const schemaMap = results.reduce((acc, item) => {
              acc[item.schemaName] = item.schema;
              return acc;
            }, {});
            return fetchSchemasSuccess(schemaMap);
          })
        );
    });

⚠️ 注意：这个方法会降低请求效率，因为必须等前一个请求完成才会发起下一个，所以只适合请求量很小的场景。

如果你的epic里是用Promise来处理请求的，也可以用类似的思路：

const fetchSchemas = async (schemaNames) => {
  // 给每个Promise的结果绑定schemaName
  const schemaPromises = schemaNames.map(name => 
    fetch(`/your-api-endpoint/${name}`)
      .then(res => res.json())
      .then(schema => ({ schemaName: name, schema }))
      // 可选：处理单个请求失败的情况，避免Promise.all全部失败
      .catch(err => ({ schemaName: name, error: err }))
  );

  const results = await Promise.all(schemaPromises);
  
  // 转换为目标对象，同时可以处理失败的请求
  return results.reduce((acc, item) => {
    if (item.schema) {
      acc[item.schemaName] = item.schema;
    } else {
      // 可以在这里记录错误，比如 acc[`${item.schemaName}_error`] = item.error;
      console.error(`Failed to fetch schema for ${item.schemaName}:`, item.error);
    }
    return acc;
  }, {});
};

不管用哪种方法，核心都是让每个请求的结果带上它的“身份标识”（也就是schemaName），这样就彻底摆脱了对返回顺序的依赖，完美解决你没法建立对应关系的问题。

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