我如何操作数据来自多个异步ajax异步调用与回调

How do I manipulate data coming from multiple async ajax async calls with callback?

本文关键字：异步 ajax 调用 回调 何操作 操作 数据      更新时间：2023-09-26

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

我的第一个主要问题是，当我做数据操作使用回调函数setA,setB，…ajax调用的返回值并不总是存在，我结束了对来自"dataFromAjax"的未识别变量的操作。是否有一种方法可以在setB中执行操作，只有当我知道我在dataFromAjax['firstCall']中有一些数据由函数setA设置?

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

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;       
}

您可以尝试使用$.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 */ }

如果您想检查对象中是否存在属性(使其更一致)

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
          });
}
相关文章：