如何简化多个同URL不同请求体的fetch Promise调用？

这太常见啦！你完全不用重复写5遍几乎一样的fetch代码，咱们用数组加映射的方式就能搞定，代码简洁还好维护。

具体实现思路 #

1. 把所有不同的productVariant值整理到一个数组里
2. 提取请求的公共配置（比如URL、请求头、方法），避免重复编写
3. 用Array.map()遍历变体数组，为每个元素生成对应的fetch请求
4. 最后把生成的请求数组传给Promise.all()批量执行

示例代码 #

// 第一步：把所有需要请求的productVariant放到数组里
const productVariants = [
  productVariant1,
  productVariant2,
  productVariant3,
  productVariant4,
  productVariant5
];

// 第二步：提取公共请求配置
const baseRequestConfig = {
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
  method: "POST"
};
const targetUrl = "https://cors-anywhere.herokuapp.com/https://api.myurl.com/verify";

// 第三步：批量生成请求数组
const fetchRequests = productVariants.map(variant => 
  fetch(targetUrl, {
    ...baseRequestConfig,
    body: `link=${variant}&license_key=${licenseKey}`
  }).then(response => {
    // 这里放你原来的"do something"逻辑，比如解析响应
    return response.json(); // 示例操作，可根据实际需求调整
  })
);

// 第四步：批量执行并处理结果
Promise.all(fetchRequests)
  .then(allResults => {
    // allResults是按请求顺序排列的响应结果数组
    console.log("所有请求完成：", allResults);
    // 你的后续处理逻辑写在这里
  })
  .catch(error => {
    // 统一处理请求中的错误
    console.error("请求出错：", error);
  });

这么做的好处 #

• 减少冗余代码：不用复制粘贴重复的fetch配置，只需要维护一个变体数组和公共配置
• 扩展性强：以后要新增变体，直接往productVariants数组里加元素就行，不用改其他逻辑
• 逻辑统一：所有请求的处理逻辑集中在map回调里，方便统一修改调试

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