如何在AJAX请求成功后执行forEach循环且避免UI阻塞？

嘿，我太懂你不想用async: false的心情了——阻塞UI在单页项目里绝对是用户体验的大忌。下面给你几个实用的非阻塞方案，完美满足你“等AJAX成功再进行下一次迭代”的需求：

1. 用async/await配合for...of循环 #

forEach本身并不支持异步等待，所以我们可以换成for...of循环，它能很好地和async/await配合。首先把你的AJAX请求封装成返回Promise的函数，然后在循环里逐个等待请求完成：

// 先把AJAX请求封装成Promise
function fetchData(item) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: '你的接口地址',
      data: item,
      success: (response) => {
        console.log('请求成功:', response);
        resolve(response);
      },
      error: (err) => reject(err)
    });
  });
}

// 用async函数包裹，配合for...of循环
async function processItems(items) {
  for (const item of items) {
    try {
      await fetchData(item);
      // 这里可以做请求成功后的后续操作，下一次循环会自动等待当前请求完成
    } catch (err) {
      console.error('请求失败:', err);
      // 可以选择处理错误，或者中断循环，根据你的需求来
    }
  }
}

// 调用示例
const items = [/* 你的数组元素 */];
processItems(items);

这个方案最直观，代码可读性也高，是现在异步处理的首选方式。

2. 递归手动控制迭代 #

如果你的项目环境不支持async/await（比如旧版浏览器），递归是个不错的替代方案。我们可以写一个函数，每次只处理数组的一个元素，成功后再调用自己处理下一个：

function processItemsRecursively(items, index = 0) {
  if (index >= items.length) {
    console.log('所有元素处理完成');
    return;
  }

  const currentItem = items[index];
  $.ajax({
    url: '你的接口地址',
    data: currentItem,
    success: (response) => {
      console.log('请求成功:', response);
      // 处理成功后，递归调用处理下一个元素
      processItemsRecursively(items, index + 1);
    },
    error: (err) => {
      console.error('请求失败:', err);
      // 可以选择重试，或者跳过当前元素继续处理下一个
      processItemsRecursively(items, index + 1);
    }
  });
}

// 调用示例
const items = [/* 你的数组元素 */];
processItemsRecursively(items);

这种方式不需要依赖ES6+的特性，兼容性好，但代码结构相对没那么直观。

3. 用reduce构建Promise链 #

我们还可以利用数组的reduce方法，把数组转换成一个依次执行的Promise链，每个Promise完成后再执行下一个：

const items = [/* 你的数组元素 */];

items.reduce((prevPromise, item) => {
  return prevPromise.then(() => {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: '你的接口地址',
        data: item,
        success: (response) => {
          console.log('请求成功:', response);
          resolve(response);
        },
        error: (err) => reject(err)
      });
    });
  });
}, Promise.resolve())
.then(() => {
  console.log('所有请求完成');
})
.catch((err) => {
  console.error('某个请求失败:', err);
});

这个方案比较优雅，用函数式的方式处理异步流程，但可读性对新手来说可能稍差一点。

以上三个方案都是非阻塞的，不会卡住UI，完全符合你的需求。根据你的项目环境和代码风格选一个就行～

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