具有多个依赖项的jQuery ajax调用链

小编典典

具有多个依赖项的jQuery ajax调用链

ajax

我不太了解jQuery的魔术延迟对象。假设以下代码：

function callWebService(uri, filter, callback)
{
  var data = {};

  if (filter && filter != '')
    data['$filter'] = filter;

  jQuery.ajax({
    url: '/_api/lists/' + uri + '/items',
    data: data,
    success: callback,
    dataType: 'json'
  });
}

function getInitialData() {
  callWebService("InitialData", "", function (data) {
    //do stuff with data
  });
}

function getGreenData() {
  callWebService("GreenData", "filter from InitialData", function (data) {
    //do stuff with data
  });
}

function getRedData() {
  callWebService("RedData", "filter from InitialData", function (data) {
    //do stuff with data
  });
}

function getFinalData() {
  callWebService("FinalData", "filter from RedData & GreenData", function (data) {
    //do stuff with data
  });
}

我要执行的操作的顺序是这样的-最后，我将调用四个Web服务，而调用彼此依赖（一个长链）：

呼叫 getInitialData
getGreenData依存呼叫getInitialData
getRedData依存呼叫getInitialData
调用getFinalData依赖于getGreenData和getRedData

如您所知2和3可能同时发生。我想我可以使用jQuery.when()（或resolve？），我只是不知道如何在这里应用它。我想我需要重新编写功能以始终返回ajax对象？

伪代码如下所示：

getInitialData().then(getGreenData, getRedData).then(getFinalData)

阅读 237

2020-07-26

共1个答案

小编典典

$ .ajax返回jQuery承诺。然后then，您可以调用该诺言将完成链接到一个函数。该ajax
data作为promise参数传递给任何最终的回调函数。这是因为$ .ajax“承诺返回Ajax数据”。

如果对所有功能都遵循相同的模式，则可以根据需要链接所有内容。通过不调用函数或添加匿名回调，它仅使用每个函数调用产生的承诺并将它们组合在一起。

就像是：

function CallWebService (uri, filter)
{
  var data = {};

  if (filter && filter != '')
    data['$filter'] = filter;

  return jQuery.ajax({
    url: '/_api/lists/' + uri + '/items',
    data: data,
    dataType: 'json'
  });
}

function getGreenData() {
  return CallWebService("GreenData", "filter from InitialData");
}

function getRedData() {
  return CallWebService("RedData", "filter from InitialData");
}

function GetInitialData() {
    return CallWebService("InitialData", "").then(GetGreenData);
}

// Fetch green data then red data sequentially
function GetFinalData () {
    return getGreenData().then(getRedData);
}

// Call the final one
GetFinalData().done(function(greendata, reddata){
     Alert("all done!");
});

要并行运行promise，请立即评估函数，并将结果promise与结合使用$.when：

例如

// Fetch green data and red data in parallel
function GetFinalData () {
    return $.when(getGreenData(), getRedData());
}

2020-07-26