如何高效处理多个AJAX删除请求？批量删除场景求助

针对你提到的批量删除场景，这里有几个实用的优化方案，你可以根据业务限制灵活选择：

方案1：并行发起请求（最快但需注意接口限流） #

如果后端接口没有严格的请求频率限制，并行发起所有删除请求是效率最高的方式。我们可以把每个回调式的this.$http.delete包装成Promise，再用Promise.allSettled统一处理所有请求结果——这样哪怕个别请求失败，也不会影响其他请求的执行和结果统计。

示例代码：

// 把每个删除请求包装为Promise
const deletePromises = [1, 3, 5, 7].map(id => {
  return new Promise((resolve, reject) => {
    this.$http.delete(delete_url(id), 
      (response) => resolve({ id, success: true, response }),
      (error) => reject({ id, success: false, error })
    );
  });
});

// 统一处理所有请求的完成状态
Promise.allSettled(deletePromises)
  .then(results => {
    // 统计成功/失败的ID
    const successIds = results
      .filter(res => res.status === 'fulfilled')
      .map(res => res.value.id);
    const failedIds = results
      .filter(res => res.status === 'rejected')
      .map(res => res.reason.id);
    
    console.log(`成功删除ID：${successIds.join(', ')}`);
    console.log(`删除失败ID：${failedIds.join(', ')}`);
    // 这里可以给用户展示更友好的结果提示
  });

如果你的this.$http本身支持返回Promise（比如基于axios封装的版本），代码可以更简洁：

const deletePromises = [1, 3, 5, 7].map(id => 
  this.$http.delete(delete_url(id))
    .then(response => ({ id, success: true, response }))
    .catch(error => ({ id, success: false, error }))
);

Promise.all(deletePromises)
  .then(results => {
    // 同样做结果统计和提示
  });

注意：如果后端有QPS限制，并行请求可能触发限流或报错，这种情况就不适合用这个方案。

方案2：串行发起请求（避免限流但速度稍慢） #

如果后端接口有请求频率限制，或者你需要保证删除操作的顺序，可以用async/await串行执行每个删除请求：

示例代码：

async function batchDelete() {
  const ids = [1, 3, 5, 7];
  const result = { success: [], failed: [] };

  for (const id of ids) {
    try {
      const response = await new Promise((resolve, reject) => {
        this.$http.delete(delete_url(id), resolve, reject);
      });
      result.success.push({ id, response });
    } catch (error) {
      result.failed.push({ id, error });
    }
  }

  console.log(`成功删除ID：${result.success.map(item => item.id).join(', ')}`);
  console.log(`删除失败ID：${result.failed.map(item => item.id).join(', ')}`);
}

// 调用执行
batchDelete();

这个方案的优点是不会一次性发起大量请求，避免触发后端限流，但总耗时是单个请求的总和，速度会比并行慢一些。

方案3：后端改造（最优解） #

如果条件允许，强烈建议和后端同学沟通，新增一个批量删除接口，比如POST /api/users/batch-delete，请求体传入ID数组{ "ids": [1, 3, 5, 7] }。这样只需要发起一次请求就能完成所有删除操作，不仅效率最高，还能减少网络开销和出错概率。

示例请求代码（假设后端已支持）：

this.$http.post('/api/users/batch-delete', { ids: [1, 3, 5, 7] })
  .then(response => {
    // 根据后端返回的结果处理，比如哪些ID成功删除、哪些失败
    console.log('批量删除完成', response);
  })
  .catch(error => {
    console.error('批量删除失败', error);
  });

这个方案是最理想的，因为它从根源上解决了多次请求的问题，后端还能在数据库层面做批量操作，性能也更优。

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