如何借助Promise循环数组，顺序发送Javascript/jQuery AJAX POST请求？

看来你需要实现一个批量处理文章的功能——既要发送带ID的POST请求，又要实时从表格里移除已处理的行来展示进度对吧？我给你完善一下方案，比你原来的代码更稳定也更贴合需求：

1. 先搭好可关联ID的表格结构 #

首先你的HTML表格得能和文章ID绑定，推荐给每行加个data-article-id属性，这样后续找对应行更方便：

<table id="article-table" border="1">
  <thead>
    <tr>
      <th>文章标题</th>
      <th>处理状态</th>
    </tr>
  </thead>
  <tbody>
    <tr data-article-id="1">
      <td>前端性能优化实战指南</td>
      <td>待处理</td>
    </tr>
    <tr data-article-id="2">
      <td>JavaScript异步编程全解析</td>
      <td>待处理</td>
    </tr>
    <!-- 更多文章行 -->
  </tbody>
</table>
<button id="start-processing">开始批量处理</button>

2. 改进JavaScript处理逻辑（解决并发问题+实时更新） #

你原来的代码直接遍历数组发请求，容易因为并发量太大导致服务器压力过载或者请求失败。下面改成串行处理（处理完一篇再发下一篇），同时实时更新表格状态：

// 从表格中自动提取所有文章ID，不用手动维护数组，更灵活
let articleIds = [];
$('#article-table tbody tr').each(function() {
  articleIds.push($(this).data('article-id'));
});

// 定义串行处理的核心函数
function processNextArticle() {
  // 数组为空说明所有文章处理完了
  if (articleIds.length === 0) {
    alert('所有文章处理完成！');
    return;
  }

  // 取出第一个待处理的ID，并从数组中移除
  const currentId = articleIds.shift();
  const $targetRow = $(`#article-table tbody tr[data-article-id="${currentId}"]`);

  // 先把当前行状态改成「处理中」，给用户反馈
  $targetRow.find('td:last').text('处理中...');

  // 发送POST请求
  $.ajax({
    type: 'POST',
    url: 'index.php?process=article', // 替换成你的实际接口地址
    data: { article_id: currentId }, // 携带文章ID参数
    dataType: 'json',
    success: function(res) {
      // 请求成功后，用淡出动画移除该行，再处理下一篇
      $targetRow.fadeOut(300, function() {
        $(this).remove();
        processNextArticle();
      });
    },
    error: function(xhr, status, err) {
      // 请求失败时标记状态，也可以选择把ID放回数组开头重试
      $targetRow.find('td:last').text('处理失败');
      // 如果需要重试，取消下面这行注释：
      // articleIds.unshift(currentId);
      processNextArticle();
    }
  });
}

// 绑定按钮点击事件，启动处理流程
$('#start-processing').click(function() {
  // 防止重复点击
  $(this).prop('disabled', true).text('处理中...');
  processNextArticle();
});

3. 关键细节说明 #

• 行ID绑定：用data-article-id把表格行和文章ID关联，比单独维护数组更可靠，表格内容更新时不用手动修改代码。
• 串行请求：避免一次性发送大量请求压垮服务器，处理流程更稳定。
• 实时反馈：处理中显示状态、成功后移除行、失败标记结果，用户能清晰看到处理进度。
• 防重复触发：点击启动按钮后禁用按钮，防止重复触发处理流程。

4. 可选优化点 #

• 可以添加进度条，用(总文章数 - 剩余待处理数)/总文章数计算进度百分比。
• 收集处理失败的文章ID，最后导出失败列表方便重试。
• 支持暂停/继续功能：暂停时停止调用processNextArticle，继续时重新调用即可。

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