11ty项目Promise.all调用租赁API返回重复结果求助

核心问题：循环中的闭包陷阱 #

你遇到的所有租赁API返回同一个链接的问题，本质是循环中异步操作的闭包引用问题。如果你的代码是通过普通for循环（尤其是用var声明索引i）生成请求体，所有异步的fetch调用会共享同一个i的引用——当fetch实际执行时，循环已经结束，i已经变成数组的最后一个索引，导致所有请求都用了最后一个房产的参数，自然返回相同的租赁链接。

日志里请求体先批量打印、再批量输出响应是正常的：循环是同步执行的，会先构建所有请求体并打印，而fetch是异步操作，需要等所有请求的响应都返回后，才会通过Promise.all批量处理结果。

修复方案 #

不需要放弃Promise.all（它是并行请求的最优方案），只需要调整代码确保每个异步请求捕获独立的房产数据：

方案1：用Array.map替代普通for循环 #

map的回调函数会为每个迭代创建独立作用域，直接捕获当前房产对象，彻底避免索引引用问题：

// 假设你已获取到初始房产数据properties
const allData = await Promise.all(
  properties.map((prop) => {
    // 并行发起图片和租赁API请求
    const imgPromise = fetch(`/api/images/${prop.id}`).then(res => res.json());
    const leasePromise = fetch('/api/lease', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ 
        // 直接用当前房产的属性，不要依赖索引i
        propertyId: prop.id,
        // 如果确实需要索引，map的回调可以传第二个参数index
        // index: index
      })
    }).then(res => res.json());

    // 合并两个请求的结果，返回完整房产数据
    return Promise.all([imgPromise, leasePromise]).then(([imgs, leaseUrl]) => ({
      ...prop,
      imgs,
      leaseUrl
    }));
  })
);

方案2：如果坚持用for循环，用let声明索引 #

ES6+的let在for循环每次迭代会创建新的变量绑定，确保每个异步请求捕获独立的i值：

const allPromises = [];
// 用let声明i，每次迭代创建独立的i绑定
for (let i = 0; i < properties.length; i++) {
  const currentProp = properties[i]; // 提前存当前房产，避免后续索引变化
  const imgPromise = fetch(`/api/images/${currentProp.id}`).then(res => res.json());
  const leasePromise = fetch('/api/lease', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ propertyId: currentProp.id })
  }).then(res => res.json());

  allPromises.push(Promise.all([imgPromise, leasePromise]));
}

const allData = await Promise.all(allPromises);

额外建议 #

1. 不要依赖索引生成请求体：直接使用当前迭代的房产对象属性（比如prop.id），比通过索引i去数组取元素更安全，也更易维护。
2. 调试实际请求：在11ty本地开发时，开启浏览器的Network面板查看请求参数，确认每个租赁API的请求体是否正确；构建阶段可以给fetch添加日志，打印每个请求的配置信息。
3. 错误处理：给fetch添加错误捕获，避免单个请求失败导致整个Promise.all崩溃：

const leasePromise = fetch('/api/lease', {/* 配置 */})
  .then(res => {
    if (!res.ok) throw new Error(`租赁API请求失败: ${res.status}`);
    return res.json();
  })
  .catch(err => {
    console.error(`房产${prop.id}的租赁请求出错:`, err);
    return null; // 或者返回默认值
  });

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