如何使用回调操作来自多个异步 ajax 异步调用的数据？答案

【问题标题】：How do I manipulate data coming from multiple async ajax async calls with callback?如何使用回调操作来自多个异步 ajax 异步调用的数据？
【发布时间】：2016-09-24 00:25:12
【问题描述】：

我有以下代码可以使用回调进行异步 ajax 调用。

我的第一个主要问题是，当我使用回调函数 setA、setB、... 进行数据操作时，ajax 调用的返回值并不总是存在，并且我结束了对来自“dataFromAjax”的未识别变量的操作。只有当我知道我在 dataFromAjax['firstCall'] 中有一些由函数 setA 设置的数据时，有没有办法在 setB 中执行操作？

第二个问题有没有一种方法可以简化代码，而不必为每次数据操作都创建一个新的成功函数？

dataFromAjax = {};

function makeACall(url,successCallBack,errorCallback){
   $.ajax({ 
          type: 'GET', 
          async: true,
          url: url, 
          success: successCallBack,
          error: errorCallback
          });
}

makeACall(url,setA,errorAjax)
makeACall(url,setB,errorAjax)
makeACall(url,setC,errorAjax)
makeACall(url,setD,errorAjax)

function setA(ajaxData){
   dataFromAjax['firstCall'] = ajaxData;       
}

function setB(ajaxData){
  dataFromAjax['secondCall'] =  dataFromAjax['firstCall'] + ajaxData;       
}

function setC(ajaxData){
  dataFromAjax['thirdCall'] =  dataFromAjax['secondCall'] / ajaxData;       
}

【问题讨论】：

标签： javascript jquery ajax asynchronous callback

【解决方案1】：

你可以试试$.when函数，这里是文档https://api.jquery.com/jquery.when/ 基本上您的代码可能如下所示：

$.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!" );
  }
});

在你的情况下（取决于你想要实现的目标）

$.when($ajax.(url), $.ajax(url), $.ajax(url), $.ajax(url)).then(success, error);

function success(a, b, c, d) { return (a+b)/c; }
function error() { /* error handling */ }

【讨论】：

很有趣，我会测试一下。
非常好的例子，正是我想要的。

【解决方案2】：

如果要检查对象中是否存在属性（使其更加一致）。

if (dataFromAjax.firstCall) {
  dataFromAjax.secondCall =  dataFromAjax.firstCall + ajaxData; 
}

我不确定我是否理解，但如果您不想为每个 ajax 调用创建单独的成功回调，您可以创建一个默认回调并删除一个参数。

function defaultSuccess(ajaxData) {
    // do what you want
}

function makeACall(url, errorCallback){
   $.ajax({ 
          type: 'GET', 
          async: true,
          url: url, 
          success: defaultSuccess,
          error: errorCallback
          });
}

【讨论】：

if (dataFromAjax.firstCall) 看起来像一次性检查