Node+Express项目中嵌套异步函数调用Fetch API获取资源失败

嘿，我来帮你捋捋这个问题——删除功能正常，但删完调用tableTasks重载列表时就触发连接错误，而且这个API在其他场景都能正常工作，确实挺让人困惑的。咱们一步步拆解问题：

核心问题排查&修复方案 #

1. 先补全tableTasks里的两个关键漏洞 #

你当前的tableTasks有两个容易被忽略的问题，这很可能是报错的直接原因：

• 你调用response.json()时没加await！这个方法本身是异步的，必须等待它完成才能拿到真实数据；
• 没有检查响应是否成功，也没捕获网络请求的错误，导致错误直接抛出成未处理的Promise拒绝。

优化后的tableTasks应该是这样：

async function tableTasks() {
  try {
    const response = await fetch("http://XX.XX.XXX.XXX:3000/list");
    // 先检查HTTP响应是否正常（状态码200-299）
    if (!response.ok) {
      throw new Error(`列表请求失败，服务器返回状态码: ${response.status}`);
    }
    // 一定要加await，等待JSON解析完成
    const data = await response.json();
    // 这里写渲染表格的逻辑
    renderTaskTable(data);
  } catch (err) {
    console.error("加载任务列表出错:", err);
    // 可以在这里给用户显示友好提示，比如"加载失败，请稍后重试"
  }
}

2. 确保删除请求完成后再调用列表重载 #

你现在是直接在deleteTask里调用tableTasks(false)，但如果删除请求是异步的，可能删除操作还没在服务器端完成，就立刻发起了列表请求——这会导致服务器可能还在处理删除，或者出现请求竞态，引发连接失败。

修改deleteTask，等待删除请求完成后再调用tableTasks：

async function deleteTask(taskId) {
  try {
    // 先等待删除请求完成
    const deleteRes = await fetch(`http://XX.XX.XXX.XXX:3000/delete/${taskId}`, {
      method: "DELETE"
    });
    if (!deleteRes.ok) throw new Error("删除任务失败");

    // 确认删除完成后，再重载表格
    await tableTasks();
  } catch (err) {
    console.error("删除或重载表格出错:", err);
  }
}

3. 排查服务器端的并发限制（可选） #

如果服务器对同一IP的并发请求有临时限制，几乎同时发起的删除和列表请求可能被拦截。你可以临时给tableTasks加个极短的延迟来排查：

async function tableTasks() {
  try {
    // 临时加100ms延迟，测试是否是并发请求问题
    await new Promise(resolve => setTimeout(resolve, 100));
    const response = await fetch("http://XX.XX.XXX.XXX:3000/list");
    // 后续逻辑...
  } catch (err) {
    // 错误处理...
  }
}

4. 检查Fetch请求的上下文（可选） #

如果你的应用是跨域的，可以显式指定请求模式和凭证携带，确保请求上下文一致：

const response = await fetch("http://XX.XX.XXX.XXX:3000/list", {
  mode: "cors",
  credentials: "include" // 如果需要携带cookie等凭证的话
});

验证步骤 #

1. 先修复tableTasks里的await response.json()和错误处理；
2. 修改deleteTask，确保等待删除请求完成后再调用列表重载；
3. 打开浏览器控制台的Network标签，查看失败请求的具体状态（是真的没发出去，还是服务器返回了特定状态码），这能帮你进一步定位问题。

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