Prototype.js是否有jQuery的when()/then()等效方法？多AJAX请求处理咨询

嘿，这个问题问得很实用！先给你明确答案：Prototype.js 本身并没有和 jQuery 的 when()/then() 完全对等的原生方法，不过要实现「等多个AJAX请求全部完成后再执行操作」的需求，还是有几种靠谱的实现方式的，我给你拆解一下：

方法一：手动计数追踪请求状态 #

这种方法适用于所有版本的 Prototype.js，核心思路就是维护一个请求计数器，每完成一个请求（不管成功还是失败）就把计数器减1，当计数器归0时，就触发我们需要延迟执行的操作。

如果不区分请求成功/失败，只要所有请求都结束就执行的话，代码可以这么写：

// 初始化请求总数
let totalRequests = 3;
// 定义所有请求完成后的回调函数
function handleAllComplete() {
  console.log('所有AJAX请求都结束啦！');
  // 这里写你要延迟执行的逻辑
}

// 发起第一个请求
new Ajax.Request('/api/data1', {
  onComplete: function() {
    totalRequests--;
    if (totalRequests === 0) handleAllComplete();
  }
});

// 发起第二个请求
new Ajax.Request('/api/data2', {
  onComplete: function() {
    totalRequests--;
    if (totalRequests === 0) handleAllComplete();
  }
});

// 发起第三个请求
new Ajax.Request('/api/data3', {
  onComplete: function() {
    totalRequests--;
    if (totalRequests === 0) handleAllComplete();
  }
});

如果需要仅当所有请求都成功时才执行后续操作，可以调整逻辑：在onSuccess里减计数器，同时记录是否有请求失败，比如：

let totalRequests = 3;
let hasFailed = false;

function handleAllSuccess() {
  if (!hasFailed) {
    console.log('所有请求都成功完成！');
    // 执行成功后的操作
  } else {
    console.log('有请求失败，不执行后续操作');
  }
}

new Ajax.Request('/api/data1', {
  onSuccess: function() {
    totalRequests--;
    if (totalRequests === 0) handleAllSuccess();
  },
  onFailure: function() {
    hasFailed = true;
    totalRequests--;
    if (totalRequests === 0) handleAllSuccess();
  }
});
// 另外两个请求同理复制上述逻辑

方法二：利用 Prototype 1.7+ 的 Deferred 对象 #

从 Prototype 1.7 版本开始，框架引入了 Deferred 对象，它的作用和 jQuery 的 Deferred 类似，我们可以用它来模拟 when()/then() 的功能，写法更优雅。

首先我们可以封装一个返回 Deferred 实例的 AJAX 函数，然后用 Deferred.when() 来监听多个请求的状态：

// 封装AJAX请求，返回Deferred对象
function createAjaxDeferred(url) {
  const deferred = new Deferred();
  new Ajax.Request(url, {
    onSuccess: function(response) {
      // 请求成功时，传递响应内容resolve
      deferred.resolve(response.responseText);
    },
    onFailure: function(response) {
      // 请求失败时，传递错误信息reject
      deferred.reject(response.statusText);
    }
  });
  return deferred;
}

// 创建三个请求的Deferred实例
const req1 = createAjaxDeferred('/api/data1');
const req2 = createAjaxDeferred('/api/data2');
const req3 = createAjaxDeferred('/api/data3');

// 监听所有请求的状态：全部成功触发done，任意失败触发fail
Deferred.when(req1, req2, req3)
  .done(function(res1, res2, res3) {
    console.log('所有请求都成功！');
    console.log('请求1结果:', res1, '请求2结果:', res2, '请求3结果:', res3);
    // 执行成功后的延迟操作
  })
  .fail(function(errorMsg) {
    console.log('有请求失败了，错误信息:', errorMsg);
    // 处理失败逻辑
  });

这种方式和 jQuery 的 when()/then() 逻辑几乎一致，代码可读性更高，也更灵活，适合使用新版本 Prototype 的项目。

小提示 #

• 如果你的项目还在使用 Prototype 1.7 以下的旧版本，手动计数的方法是最稳妥的选择；
• 要是需要处理更复杂的请求依赖（比如某个请求依赖另一个请求的结果），Deferred 方式会更得心应手。

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