如何用JavaScript为每个数组新增列，实现多响应表格布局

我明白你的痛点了——因为Ajax的异步特性，你遍历子项发起请求时，还没等所有响应返回就继续执行后续逻辑，导致只有最后一个请求的结果能显示在表格里，而且没法统一等待所有请求完成后再渲染。咱们用Promise.all来搞定这个问题，这是处理多个异步请求等待的标准方案。

核心思路 #

• 先获取初始的子项列表
• 把每个子项的Ajax请求包装成Promise对象
• 用Promise.all等待所有请求完成，一次性拿到所有响应数据
• 把响应数据整理成表格需要的行结构（每行对应所有请求的同位置数据）
• 统一渲染表格

完整代码示例 #

// 1. 获取初始子项列表（假设这是你的初始请求）
$.get('/api/get-initial-items')
  .done(function(initialResponse) {
    const items = initialResponse.items; // 你的子项数组
    const requestPromises = [];

    // 2. 为每个子项创建Ajax Promise
    items.forEach(function(item) {
      // 兼容旧版jQuery的Promise包装写法，jQuery3.0+可直接用$.post返回的Promise
      const requestPromise = new Promise(function(resolve, reject) {
        $.post('/api/get-item-detail', { itemId: item.id })
          .done(function(detailResponse) {
            resolve(detailResponse.data); // 存储每个子项的响应数据数组
          })
          .fail(function(error) {
            reject(error);
            console.error('请求子项失败:', error);
          });
      });
      requestPromises.push(requestPromise);
    });

    // 3. 等待所有请求完成
    Promise.all(requestPromises)
      .then(function(allResponses) {
        // allResponses是按请求顺序排列的响应数组，每个元素对应一个子项的响应数据
        // 4. 整理表格行数据：处理响应长度不一致的情况
        const maxRowCount = Math.max(...allResponses.map(res => res.length));
        const tableRows = [];

        for (let rowIndex = 0; rowIndex < maxRowCount; rowIndex++) {
          // 从每个响应中取对应行的数据，无数据则用占位符填充
          const rowData = allResponses.map(res => res[rowIndex] || '-');
          tableRows.push(rowData);
        }

        // 5. 渲染表格（假设你的表格已有thead结构）
        const $tbody = $('#target-table tbody');
        $tbody.empty(); // 清空旧内容

        tableRows.forEach(function(row) {
          const $tr = $('<tr></tr>');
          row.forEach(function(cell) {
            $tr.append($('<td></td>').text(cell));
          });
          $tbody.append($tr);
        });
      })
      .catch(function(error) {
        console.error('部分请求失败:', error);
      });
  })
  .fail(function(error) {
    console.error('获取初始子项失败:', error);
  });

关键说明 #

• Promise化Ajax：jQuery 3.0及以上版本的Ajax方法本身会返回Promise，所以可以简化为const requestPromise = $.post('/api/get-item-detail', { itemId: item.id }).then(res => res.data);，上面的代码是兼容旧版本的写法。
• Promise.all的作用：它会等待所有传入的Promise都成功完成后，才会进入then回调，此时allResponses已经按请求顺序保存了所有子项的响应数据，彻底解决异步请求的顺序和等待问题。
• 处理响应长度不一致：通过Math.max找到最长的响应长度，遍历每个行索引从各响应中取对应数据，用占位符填充缺失值，保证表格结构完整。
• 统一渲染时机：等所有数据准备完毕后再渲染表格，避免异步请求乱序导致的渲染错误，也不会出现只有最后一个请求数据显示的问题。

这样修改后，你就能得到每行对应所有请求同位置响应数据的表格啦！

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