如何实现Fetch API返回结果与入参顺序一致

存在可落地的实现方案，核心原则是不依赖接口返回的先后顺序存储结果，通过入参索引/唯一标识绑定返回值，就能彻底解决返回结果和入参顺序不匹配的问题。

乱序根因 #

• 你当前的实现直接把整组ISBN传入第三方接口，第三方接口本身没有承诺按入参顺序返回数据，自然会出现排序随机的问题
• 如果后续改为循环请求单个ISBN接口，直接用push接收返回值的写法也会乱序：不同请求的网络响应速度不可控，先返回的结果会被先插入数组，和请求发送顺序无关

实现方案 #

方案1：保留批量请求（性能最优） #

拿到批量接口的返回结果后，先构建「ISBN为键、对应数据为值」的映射表，再严格按照入参ISBN的顺序，从映射表中依次取数组装结果数组，100%对齐入参顺序。
修正后代码：

exports.bookData = async (req, res) => {
  const inputList = req.body.isbns; // 入参ISBN顺序：[2935689888, 2856989845, 1156464654]
  const headers = {
    "Content-Type": "application/json",
    Authorization: "6456_46446548498465",
  };

  // 请求图书基础数据接口
  const bookDataRes = await fetch(`https://api1/${inputList}`, { headers })
    .then(response => response.ok ? response.json() : null);
  
  // 请求价格、运费接口
  const priceShippingRes = await fetch(`https://api3.com/${inputList}/6465dc68-564h5466g-546f684g86/`)
    .then(response => response.json());

  // 构建ISBN到数据的映射，完全不依赖接口返回顺序
  const bookMap = new Map();
  if (bookDataRes) {
    // 按接口实际返回的ISBN字段取值做key，示例假设单条数据的isbn字段存对应编号
    bookDataRes.forEach(item => bookMap.set(item.isbn.toString(), item));
  }
  const priceMap = new Map();
  const shippingMap = new Map();
  if (priceShippingRes) {
    priceShippingRes.forEach(item => {
      priceMap.set(item.isbn.toString(), item.price);
      shippingMap.set(item.isbn.toString(), item.shipping);
    });
  }

  // 严格按照入参ISBN顺序组装结果
  const bookData = [];
  const price = [];
  const shipping = [];
  inputList.forEach(isbn => {
    const isbnStr = isbn.toString();
    bookData.push(bookMap.get(isbnStr) || null);
    price.push(priceMap.get(isbnStr) || null);
    shipping.push(shippingMap.get(isbnStr) || null);
  });

  return res.json({ bookData, price, shipping });
};

方案2：单ISBN并发请求 #

如果接口不支持批量传参，按入参顺序构造请求Promise数组，用Promise.all接收结果即可——Promise.all返回的结果数组顺序，和传入的Promise数组顺序完全一致，不会受响应快慢影响。
注意不要为了保序刻意写成串行请求，会大幅拉长接口响应时间。
对应代码示例：

exports.bookData = async (req, res) => {
  const inputList = req.body.isbns;
  const headers = {
    "Content-Type": "application/json",
    Authorization: "6456_46446548498465",
  };

  // 按入参顺序构造请求Promise数组
  const bookDataPromiseList = inputList.map(isbn => {
    return fetch(`https://api1/${isbn}`, { headers })
      .then(res => res.ok ? res.json() : null);
  });
  const priceShippingPromiseList = inputList.map(isbn => {
    return fetch(`https://api3.com/${isbn}/6465dc68-564h5466g-546f684g86/`)
      .then(res => res.json());
  });

  // 等待所有请求完成，拿到的数组顺序和入参ISBN顺序完全对齐
  const bookData = await Promise.all(bookDataPromiseList);
  const priceShippingList = await Promise.all(priceShippingPromiseList);
  const price = priceShippingList.map(item => item?.price || null);
  const shipping = priceShippingList.map(item => item?.shipping || null);

  return res.json({ bookData, price, shipping });
};

注意事项 #

• 禁止用push方法接收异步请求的返回值，异步返回时序不可控，必然存在乱序风险
• 用映射表匹配数据时，要统一ISBN的类型（比如入参是字符串、接口返回是数字时，统一转成字符串做键），避免匹配失败
• 不需要为了保序改成串行await请求，并发+索引绑定/映射表绑定的方案性能更高，顺序也完全可控

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