如何在不禁用Chrome DevTools缓存时实现JS并行Fetch请求？

问题原因 #

Chrome浏览器对相同URL的GET请求会启用缓存优化：当检测到多个相同URL的请求同时发起时，会自动串行化这些请求，等待第一个请求完成并缓存结果后，直接复用缓存响应给后续请求，以此减少重复网络请求。这就是启用缓存时请求串行、禁用缓存后恢复并行的核心原因。

可行解决方案 #

1. 为每个请求添加唯一缓存破折参数 #

在URL末尾追加随机或递增的唯一参数（比如时间戳、UUID），让每个请求的URL唯一，绕过浏览器的缓存匹配机制：

async () => {
  try {
    const urls = [
      "http://localhost:3001/foo",
      "http://localhost:3001/foo",
      "http://localhost:3001/foo",
      "http://localhost:3001/foo",
    ];

    const requests = urls.map((url) => 
      fetch(`${url}?t=${Date.now()}`) // 追加时间戳作为唯一参数
    );
    const responses = await Promise.all(requests);
    const errors = responses.filter((response) => !response.ok);
  } catch (err) {
    console.error(err);
  }
}

注意：需确保后端接口不会因额外参数报错，若有参数校验逻辑，需提前适配。

2. 设置Fetch的cache选项强制不使用缓存 #

通过Fetch配置项指定缓存模式，直接绕过浏览器的缓存优化，同时允许并行请求：

• no-store：完全禁用缓存，每次发送全新请求且不缓存响应
• no-cache：会向服务器验证缓存有效性，无效则返回新内容，同样能绕过串行限制

async () => {
  try {
    const urls = [
      "http://localhost:3001/foo",
      "http://localhost:3001/foo",
      "http://localhost:3001/foo",
      "http://localhost:3001/foo",
    ];

    const requests = urls.map((url) => 
      fetch(url, { cache: "no-store" }) // 指定缓存模式为no-store
    );
    const responses = await Promise.all(requests);
    const errors = responses.filter((response) => !response.ok);
  } catch (err) {
    console.error(err);
  }
}

3. 改用POST请求（业务允许时） #

浏览器的缓存优化主要针对GET请求，若业务逻辑允许，将请求改为POST即可绕过串行限制：

async () => {
  try {
    const urls = [
      "http://localhost:3001/foo",
      "http://localhost:3001/foo",
      "http://localhost:3001/foo",
      "http://localhost:3001/foo",
    ];

    const requests = urls.map((url) => 
      fetch(url, { method: "POST" }) // 替换为POST方法
    );
    const responses = await Promise.all(requests);
    const errors = responses.filter((response) => !response.ok);
  } catch (err) {
    console.error(err);
  }
}

注意：需确认后端接口支持POST请求，且符合业务交互逻辑。

内容的提问来源于stack exchange，提问作者Tim van Wageningen