JS循环调用Fetch无报错崩溃问题求助

我遇到一个棘手的JavaScript错误：通过forEach循环遍历数组，为每个元素调用Fetch接口，10次请求中有7次正常，但第8次程序会无任何调试信息直接崩溃。已用try-catch包裹所有代码，仍无法定位问题，正考虑切换到Axios，想请教是否有排查思路？

相关代码 #

try {
  allCurrentPrompts.forEach(async (prompt, index) => {
    APIdata.bodyParams.message = prompt;

    async function fetchData(index) {
      // Construct the URL with the search parameter
      const url = new URL(endPoints.promptRefine);
      url.searchParams.append(
        "linkedin_id",
        APIdata.searchParams.linkedin_id
      );

      // Create the request body
      const requestBody = {
        message: APIdata.bodyParams.message,
        request: APIdata.bodyParams.request,
      };

      // Create the fetch options
      const fetchOptions = {
        method: "POST",
        headers: APIdata.headers,
        body: JSON.stringify(requestBody),
      };

      try {
        // Make the fetch call
        console.log(`Request ${index} with prompt ${prompt} sending...`);
        const response = await fetch(url, fetchOptions);
        if (!response.ok) {
          console.log(`response not ok, ${index}`);
          throw new Error("Request failed with status " + response.status);
        }

        const data = await response.json();

        // Process the response data here
        console.log(
          `Here is the response data from the api call refine ${index}`
        );
        console.log(data);
      } catch (error) {
        // Handle any errors that occurred during the fetch call
        console.error(error);
      }
    }

    // Call the fetchData function
    fetchData(index);
    console.log(`Test: 1`);
  });
} catch (error) {
  console.error(error);
} 

实际情况是前7次请求能收到响应，第8次无响应直接崩溃，疑似超时问题。我还尝试添加以下代码仍无效：

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled Promise Rejection:', event.reason);
});

排查思路 #

• 修复forEach异步陷阱：forEach不支持异步函数，外层try-catch根本抓不到内部异步错误。改成for...of循环，确保异步错误能被捕获：

try {
  for (const [index, prompt] of allCurrentPrompts.entries()) {
    APIdata.bodyParams.message = prompt;
    await fetchData(index);
    console.log(`Test: 1`);
  }
} catch (error) {
  console.error(error);
}

• 给Fetch添加超时机制：手动实现超时逻辑，避免请求挂起导致崩溃：

const fetchWithTimeout = (url, options, timeout = 10000) => {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('Request timed out')), timeout)
    )
  ]);
};
// 替换原fetch调用
const response = await fetchWithTimeout(url, fetchOptions);

• 避免请求参数被覆盖：forEach同步遍历但fetch异步执行，共享的APIdata.bodyParams会被后续循环覆盖。直接用当前循环的prompt构造请求体：

const requestBody = {
  message: prompt, // 直接使用当前循环变量，不依赖共享对象
  request: APIdata.bodyParams.request,
};

• 排查并发限制问题：浏览器对同一域名的并发请求有默认限制（通常6-8个），同时发起10个请求可能导致后续请求排队超时。改成串行请求或限制并发数（比如每次最多6个）测试。

• 补充详细日志：在请求前后记录时间戳、完整参数和响应头，定位第8次请求的具体状态：

console.log(`[${new Date().toISOString()}] Request ${index} sending, prompt:`, prompt);
// 收到响应后
console.log(`[${new Date().toISOString()}] Request ${index} response status:`, response.status, 'headers:', response.headers);

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