如何实现Deferred/Promise依赖调用？异步处理函数数组顺序执行

我懂你现在的痛点——要按顺序执行主函数options.main，再依次跑options.additionalHandler数组里的每个处理函数，而且这些函数大概率带异步操作（比如弹窗、AJAX这类），得确保前一个彻底完成了再启动下一个对吧？这事儿用Promise/Deferred来处理简直完美，我给你一步步捋清楚：

不管是主函数还是附加处理函数，只要涉及异步操作，都得让它们返回一个Promise（或者jQuery的Deferred对象，如果你项目用jQuery的话），这样才能追踪它们的完成状态。

先修正你的主函数（顺便解决你注释里的this问题——别覆盖参数里的that）：

options.main = function(buttonThat, data) {
  // 用参数传入的buttonThat作为按钮上下文，别重新赋值var that = this
  return new Promise((resolve, reject) => {
    // 你的业务逻辑，比如初始化弹窗
    const dialog = $('#somedialog').dialog({
      autoOpen: false,
      // 弹窗打开完成是异步事件，这里标记主函数完成
      open: function() {
        console.log('主函数逻辑执行完毕');
        // 把需要传递给下一个函数的参数通过resolve传出去
        resolve({ button: buttonThat, data: data });
      },
      // 处理失败场景，比如用户关闭弹窗
      close: function() {
        reject(new Error('用户提前关闭了弹窗'));
      }
    });
    dialog.dialog('open');
  });
};

然后additionalHandler里的每个函数也得遵循这个规则，每个都返回Promise：

// 示例1：带AJAX的异步处理函数
options.additionalHandler.push(function(prevResult) {
  const { button, data } = prevResult;
  return new Promise((resolve) => {
    $.ajax({
      url: '/api/submit',
      data: data,
      success: function(apiRes) {
        console.log('第一个附加处理函数完成');
        // 把新的结果合并进去传给下一个函数
        resolve({ ...prevResult, apiResponse: apiRes });
      }
    });
  });
});

// 示例2：带延迟的同步/异步混合函数
options.additionalHandler.push(function(prevResult) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('第二个附加处理函数完成');
      resolve(prevResult);
    }, 1000);
  });
});

有了返回Promise的函数后，我们可以用Promise.reduce来构建执行链条——先跑主函数，再依次执行附加处理函数，每个函数都等前一个完成后再启动。

写一个统一的执行函数：

function executeAllHandlers(buttonContext, initialData) {
  // 把主函数和附加处理函数合并成一个执行队列
  const handlerQueue = [options.main, ...options.additionalHandler];
  
  // 用reduce链式调用每个Promise
  return handlerQueue.reduce((previousPromise, currentHandler) => {
    return previousPromise.then((prevResult) => {
      // 第一次执行时prevResult是initialData，之后是上一个函数的返回结果
      return currentHandler(buttonContext, prevResult || initialData);
    });
  }, Promise.resolve(initialData)); // 初始Promise，传递初始数据
}

然后调用这个函数就行：

// 假设button是你的按钮元素，initialData是初始业务数据
const button = $('#submitButton');
executeAllHandlers(button, { orderId: 456 })
  .then((finalResult) => {
    console.log('所有处理函数都执行完啦！最终结果:', finalResult);
  })
  .catch((error) => {
    console.error('某个环节出错了:', error);
  });

要是你项目还在用jQuery的Deferred而不是原生Promise，逻辑是一样的，只是把Promise换成jQuery的Deferred对象：

修正主函数：

options.main = function(buttonThat, data) {
  const dfd = $.Deferred();
  const dialog = $('#somedialog').dialog({
    open: function() {
      console.log('主函数执行完毕');
      dfd.resolve({ button: buttonThat, data: data });
    },
    close: function() {
      dfd.reject('用户关闭了弹窗');
    }
  });
  dialog.dialog('open');
  return dfd.promise();
};

执行队列用jQuery的链式then：

function executeAllHandlers(buttonContext, initialData) {
  // 初始化链式调用
  let sequence = $.when(initialData);
  
  // 先执行主函数
  sequence = sequence.then(() => options.main(buttonContext, initialData));
  
  // 依次执行附加处理函数
  options.additionalHandler.forEach(handler => {
    sequence = sequence.then((prevResult) => handler(buttonContext, prevResult));
  });
  
  return sequence;
}

// 调用方式
executeAllHandlers(button, { orderId: 456 })
  .done((finalResult) => {
    console.log('全部完成！最终结果:', finalResult);
  })
  .fail((error) => {
    console.error('出错了:', error);
  });

• 必须返回Promise/Deferred：哪怕函数是纯同步的，也要返回Promise.resolve(result)，这样才能保证链式调用的顺序不被打乱。
• 参数传递要清晰：通过resolve传递下一个函数需要的数据，让每个后续函数都能拿到前一个的处理结果。
• 错误处理不能少：用catch（原生）或fail（jQuery）捕获任何环节的错误，避免整个链条中断后找不到问题根源。

这样就能严格按照你添加的顺序（先主函数，再附加处理函数的添加顺序）执行，哪怕里面有异步操作也能完美保证顺序~

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