如何结合本地数据与REST接口渲染jQuery DataTables表格

你说得对，问题核心确实是没正确处理异步Promise！getRestDataForId是异步函数，但DataTables的列配置回调是同步执行的，没法直接等待Promise完成后返回结果，所以现在第二列只能显示默认的-。下面是具体的修复方案：

第一步：修正异步函数的返回值 #

首先要让getRestDataForId正确返回Promise，原来的函数里没有return语句，导致调用它时拿不到异步结果。修改后：

function getRestDataForId(id) {
  return fetch('https://jsonplaceholder.typicode.com/todos/' + id)
    .then(response => response.json())
    .then(data => data.title)
}

第二步：初始化表格后异步更新单元格 #

DataTables没法在列的data回调里直接处理异步请求，所以我们先初始化表格显示默认值，之后遍历每一行，调用异步接口获取数据后再更新对应单元格：

let data = [ {"id": 1 }, {"id": 2 } ]

$(function () {
  var table = $('#table').DataTable({
    data: data,
    columns: [
      { data: "id" },
      { defaultContent: "加载中..." } // 替换成更友好的加载提示
    ]
  });

  // 遍历表格的每一行，异步获取数据并更新第二列
  table.rows().every(function() {
    const currentRow = this;
    const rowId = currentRow.data().id;
    
    getRestDataForId(rowId)
      .then(title => {
        // 更新第二列（索引为1）的内容并重新绘制
        currentRow.cell({ column: 1 }).data(title).draw();
      })
      .catch(error => {
        // 处理请求失败的情况
        currentRow.cell({ column: 1 }).data('获取失败').draw();
        console.error(`加载ID为${rowId}的数据失败:`, error);
      });
  });
});

为什么原来的方式不行？ #

原来的列配置中，data回调是同步执行的：当你调用getRestDataForId(row.id)时，函数会立即返回一个Promise，但回调本身没有返回任何值，DataTables只能直接使用defaultContent的值，等Promise完成时已经错过了渲染时机。

可选优化：先获取所有数据再初始化表格 #

如果希望表格一次性加载完成（不显示加载中的状态），可以先批量获取所有REST数据，再合并本地数据后初始化表格：

let localData = [ {"id": 1 }, {"id": 2 } ]

// 批量获取所有ID对应的REST数据
Promise.all(localData.map(item => getRestDataForId(item.id)))
  .then(titles => {
    // 合并本地数据和REST返回的标题
    const mergedData = localData.map((item, index) => ({
      ...item,
      restCalledValue: titles[index]
    }));
    
    // 初始化表格
    $('#table').DataTable({
      data: mergedData,
      columns: [
        { data: "id" },
        { data: "restCalledValue", defaultContent: "-" }
      ]
    });
  })
  .catch(error => {
    console.error("批量加载数据失败:", error);
    // 失败时仍用本地数据初始化表格
    $('#table').DataTable({
      data: localData,
      columns: [
        { data: "id" },
        { defaultContent: "加载失败" }
      ]
    });
  });

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