无法理解如何将 jquery Deferred/then 与回调一起使用

Question

我当前的 javascript 代码基本上看起来像::

function doStep1(callback) {
  thirdPartyLib.asyncExec('step1', {}, function(resp) { 
     callback(resp.value); 
   });
}
function doStep2(value, callback) {
  thirdPartyLib.asyncExec('step2', value, function(resp) { 
     callback(resp.value); 
   }); 
}
function doStep3(value, callback) {
  thirdPartyLib.asyncExec('step3', value, function(resp) { 
     callback(resp.value); 
   }); 
}
function displayResult(value) {
  $('#input').enable();
  $('#result').text(value);
}

function run() {
   doStep1(function(x){doStep2(x,function(y){doStep3(y,displayResult)}});
}

也就是说，我们需要调用三个单独的异步函数，每个函数的结果都会传递给下一个函数。但是语法非常糟糕，即使在这个非常简化的版本中也是如此。我希望我可以使用 jquery 的 deferred/promises 支持之类的东西来编写更喜欢的东西：

$.when(doStep1).then(doStep2).then(doStep3).then(displayResult);

但显然这不是正确的语法，我不确定我是否真的理解我应该使用什么语法来实现这一点，因为我尝试过的所有内容最终看起来都比我上面的 run() 函数更复杂，这违背了目的。 为了踢球，我实际上编写了我自己的 'when' 和 'then' 版本，这将允许上述语法（你仍然必须调用，例如 'resolve' 或最后的其他东西才能实际进行调用，请注意），所以我知道这应该是可能的，但也许 jQuery 库不是为这种情况设计的？

Answer 1

有很多方法可以写这个。您所写的具体内容取决于未简化代码的性质。

让我们做一个假设：

所有第三方调用都具有足够相似的形式，可以概括 doStep()函数可写，可命令执行 任何步骤。

从表面上看简化的代码，那么这个假设就满足了，代码也相当简单：

function doStep(step, value) {
    return $.Deferred(function(dfrd) {
        thirdPartyLib.asyncExec(step, value, dfrd.resolve);
    }).then(function(resp) {
        return resp.value;
    });
}
function displayResult(value) {
    $('#input').enable();
    $('#result').text(value);
}
function run(steps) {
    return steps.reduce(function(promise, step) {
        return promise.then(function(value) {
            return doStep(step, value);
        });        
    }, $.when( {} ));// the empty object here becomes the `value` passed anongside 'step1'.
}

//The asychronous sequence is determined by an array passed to run()
run(['step1', 'step2', 'step3']);

如果每个第三方调用的形式不同，那么代码会更复杂，但可能还不算太糟糕。