遍历含Promise的数组时持续触发拒绝状态的技术问题

嘿，看起来你在遍历文件列表用jQuery的$.get获取数据时，碰到了Promise一直拒绝的麻烦。我来帮你一步步排查和解决这个问题：

1. 先确认getHtml函数的正确性 #

你提到的getHtml应该是封装了$.get来获取单个HTML文件的内容对吧？首先得确保这个函数本身返回的是正确的jQuery Deferred对象（也就是Promise），而且URL拼接没有问题。比如正确的getHtml应该是这样：

function getHtml(filename) {
  // 记得把基础URL和文件名拼接正确，比如你的URL是服务器根路径的话
  return $.get(`${URL}/${filename}`);
}

如果这里的URL拼错了（比如文件路径不对），那请求肯定会失败，直接触发Promise拒绝。你可以先在浏览器里手动访问一下拼接后的URL，看看能不能正常打开那个HTML文件。

2. 修复循环里的作用域问题（避免隐性bug） #

你原来的循环用了var i，这在异步场景下会有作用域泄漏的问题——所有异步回调共享同一个i变量，可能导致最后请求的都是同一个文件名。虽然这不一定是直接导致Promise拒绝的原因，但会引发其他奇怪的问题，建议换成let i：

let surveyData = [];
// 用let i，让每次循环的i都是独立的块级作用域变量
for(let i = 0; i < testing.length; i++){
  console.log('in loop '+i);
  surveyData.push(getHtml(testing[i]));
}

或者更简洁的for...of循环：

let surveyData = [];
for(const filename of testing) {
  console.log(`正在请求: ${filename}`);
  surveyData.push(getHtml(filename));
}

3. 正确使用$.when并处理失败情况 #

$.when会在所有传入的Promise都成功时触发done回调，但只要有一个请求失败，就会直接触发fail回调。你需要加上fail回调来捕获具体的错误信息，这样才能知道到底是哪个请求出了问题：

$.when(...surveyData)
  .done(function(...responses) {
    // responses里按顺序保存了每个HTML文件的内容
    console.log("所有请求都成功啦！", responses);
    surveyData = responses;
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    // 这里会捕获第一个失败的请求详情
    console.error("有请求失败了:", textStatus, errorThrown);
    console.error("失败的请求URL:", jqXHR.url); // 直接看哪个URL错了
  });

通过fail回调里的jqXHR.url，你就能精准定位到是哪个HTML文件的请求出了问题，是404找不到文件，还是服务器内部错误。

4. 改用async/await写法（更直观易读） #

既然你已经在用await处理getFiles的请求了，不如把整个遍历逻辑都改成async/await的方式，代码更清晰，错误处理也更简单：

async function fetchAllSurveyData() {
  try {
    // 先获取文件列表，直接在这里解析JSON
    const testing = await getFiles().then($.parseJSON);
    const surveyData = [];
    
    for(const filename of testing) {
      console.log(`正在获取: ${filename}`);
      // 等待每个请求完成再继续下一个
      const htmlContent = await getHtml(filename);
      surveyData.push(htmlContent);
    }
    
    console.log("所有数据都获取完成啦！", surveyData);
    return surveyData;
  } catch(error) {
    console.error("获取数据时出错了:", error);
    // 这里可以根据需要处理错误，比如返回空数组或者提示用户
    return [];
  }
}

// 调用这个异步函数
fetchAllSurveyData();

这种写法下，任何一个请求失败都会直接进入catch块，你能清楚看到错误原因，而且代码逻辑和同步写法差不多，更容易维护。

最后几个排查小技巧 #

• 打开浏览器的Network面板，看看每个$.get请求的状态码：如果是404，说明文件路径错了；如果是500，那是服务器端的问题；如果是CORS错误，那需要服务器配置跨域权限。
• 手动拼接每个HTML文件的URL，在浏览器地址栏里访问，确认文件确实存在且能正常加载。

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