如何避免AJAX的async=false？实现所有异步任务完成后执行指定代码

你之前用async:false确实是个坏习惯，会把浏览器主线程卡死，用户体验贼差。咱们换成Promise.all来管理这些异步请求，完美解决问题，还不阻塞页面。

核心思路 #

把每个AJAX请求转换成Promise，收集所有请求的Promise到一个数组里，用Promise.all等待所有请求都成功完成后，再执行你那部分初始化流程图的代码。

具体代码示例 #

假设你原来的循环逻辑是遍历一组数据，每个数据发AJAX获取operator信息，那改成这样：

let operators = [];
const someDataArray = [/* 你的数据数组 */];

// 1. 遍历数据，把每个AJAX请求包装成Promise并收集起来
const requestPromises = someDataArray.map((item, index) => {
  return $.ajax({
    url: "你的接口地址",
    data: { /* 你的请求参数，比如item.id */ }
  }).then(response => {
    // 用索引赋值保证顺序和原数组一致，避免请求乱序导致结果顺序出错
    operators[index] = response;
  });
});

// 2. 等待所有请求完成后执行后续代码
Promise.all(requestPromises)
  .then(() => {
    // 所有请求都搞定了，现在执行你的代码
    flowData["operators"] = operators;
    console.log(flowData);
    $('#testCaseConnections').flowchart({ data: flowData });
  })
  .catch(error => {
    // 处理单个请求失败的情况，避免代码直接挂掉
    console.error("某个请求出错啦:", error);
  });

细节说明 #

1. 关于遍历方式
   用map能简洁地遍历数组并返回每个请求的Promise，当然你用普通for循环收集Promise也完全没问题，写法灵活。
2. 为什么不用push存结果？
   AJAX请求是异步的，返回顺序可能和你发起的顺序不一样，用operators[index] = response能确保结果顺序和原数据数组完全匹配，这对流程图的结构正确性很关键。
3. 错误处理不能少
   加catch分支很有必要，万一某个请求失败，Promise.all会立刻进入错误分支，你可以在这里打日志或者给用户提示，避免后续代码直接中断。
4. 老版本jQuery兼容
   如果你的jQuery版本低于3.0，$.ajax返回的是Deferred对象而非标准Promise，这时候可以用Promise.resolve($.ajax(...))把它转换成标准Promise，用法和上面一致。

这样改完，既不会阻塞页面，又能确保所有请求都完成后才初始化流程图，完美替代async:false的不良写法～

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