jQuery / .when - 将参数打包成函数？答案

【问题标题】：jQuery / .when - package up arguments into function?jQuery / .when - 将参数打包成函数？
【发布时间】：2016-07-13 12:46:12
【问题描述】：

The jQuery doco shows an example where two $.ajax calls are made under the control of a $.when（向下翻页“示例”标题）。

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
  .then( myFunc, myFailure );

这很好，但我想做的是在一个函数中定义那些 $.ajax 调用（我可能会在其中做其他事情来准备调用）。

所以是这样的：

$.when( myAjaxCall1(), myAjaxCall2() )
  .then( goodFetches, badFetches );

我已经尝试过使用如下所示的函数：

var myAjaxCall1 = function()
{
   return $.ajax('https://httpbin.org/get?Z=Y,X,W');
};
var myAjaxCall2 = function()
{
   return $.ajax('https://httpbin.org/get?A=B,C,D');
};

对于myAjaxCall1 和myAjaxCall2，我确实获得了一个三元素数组作为goodFetches 的参数，但如果我只是将$.ajax 调用直接放入@987654331，它与我收到的信息不同@ 如上面文档中的示例所示。

我应该如何重组 myAjaxCall1 和 myAjaxCall2 以使行为等同于：

$.when( $.ajax( "https://httpbin.org/get?Z=Y,X,W" ), 
        $.ajax( "https://httpbin.org/get?A=B,C,D" ) )
  .then( goodFetches, badFetches );

【问题讨论】：

我认为你不能这样做，因为 $.ajax 调用等待来自服务器的响应，所以在服务器给出响应之前调用 return 时你没有返回值。
@FadhlyPermata - 您可以从函数中返回承诺，这与 $.ajax() 返回的内容相同。
您对回调 goodFetches, badFetches 的命名表明您并不完全了解 $.when 的作用。它更像.then(allGood, anyBad)（就像任何承诺一样，两者中只有一个会被调用）。
$.when 在通过 ajax 时的行为承诺 is indeed abysimal。如果可以的话，切换到合适的 Promise 库。
你的 sn-ps 有和没有封装在函数中的 ajax 调用是完全等价的。 $.when 的行为并没有什么不同。我建议您向我们展示那些 goodFetches 和 badFetches 回调是什么以及它们出了什么问题（以及您所期望的）

标签： jquery asynchronous promise

【解决方案1】：

它可以在函数中正常工作。您可能只是没有从结果中正确访问参数。您会得到一系列参数，每个参数都是包含三个元素的子数组：[data, statusText, jqXHR]。只要函数返回承诺，无论您是否在函数中调用 ajax，这些参数都是相同的。

这是 jQuery 文档中的一个示例：

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {
  // a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively.
  // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
  var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It"
  if ( /Whip It/.test( data ) ) {
    alert( "We got what we came for!" );
  }
});

如果$.ajax() 调用直接在$.when() 参数中，或者如果您从函数返回promise，则没有区别。结果一样。

因此，您可以这样做，并且您将在 .then() 处理程序中返回相同的数据：

var myAjaxCall1 = function() {
   return $.ajax('https://httpbin.org/get?Z=Y,X,W');
};

var myAjaxCall2 = function() {
   return $.ajax('https://httpbin.org/get?A=B,C,D');
};

$.when( myAjaxCall1(), myAjaxCall2() ).then(function(a1, a2) {
      // a1[0] is data from first ajax call
      // a2[0] is data from second ajax call
});

【讨论】：