jQuery的AJAX调用多个依赖链接 [英] jQuery ajax call chaining with multiple dependencies

问题描述

我不太明白href="http://api.jquery.com/category/deferred-object/" rel="nofollow">推迟与jQuery对象的魔法

 函数callWebService（URI，过滤，回调）
{
  VAR数据= {};

  如果（过滤器和放大器;＆安培;！筛选=''）
    数据['$过滤器'] =过滤器;

  jQuery.ajax（{
    网址：'/ _api /列表/+ URI +'/项目，
    数据：数据，
    成功：回调，
    数据类型：JSON
  }）;
}

传播getInitialData（）{
  callWebService（InitialData，，功能（数据）{
    //做的东西跟数据
  }）;
}

传播getGreenData（）{
  callWebService（GreenData，从InitialData过滤器，功能（数据）{
    //做的东西跟数据
  }）;
}

传播getRedData（）{
  callWebService（RedData，从InitialData过滤器，功能（数据）{
    //做的东西跟数据
  }）;
}

传播getFinalData（）{
  callWebService（FinalData的，从RedData与放大器过滤器; GreenData功能（数据）{
    //做的东西跟数据
  }）;
}
 

我想要做的事情的顺序是像这样 - 在最后，我会打电话给4 web服务，而电话互相依赖（一种长链）：

1. 呼叫 getInitialData
2. 呼叫 getGreenData 与依赖于 getInitialData
3. 呼叫 getRedData 与依赖于 getInitialData
4. 呼叫 getFinalData 与依赖 getGreenData 和 getRedData

你可以看出2及3可能同时发生。我想我可以使用 jQuery.when（）（或解析？），我只是不知道如何在这里适用。我想我需要返工的功能总是返回Ajax对象？

Pseude- code是这样的：

  getInitialData（），然后（getGreenData，getRedData）。然后（getFinalData）
 

解决方案

$。AJAX返回一个jQuery的承诺。然后，您可以调用然后这一承诺链完成一个功能。阿贾克斯数据被作为承诺的参数，以任何最终的回调函数。这是因为$就有望重返阿贾克斯的数据。

如果你遵循相同的模式为您的所有功能，您可以链的一切，你想要的。如果不调用函数，或添加匿名的回调，它只是使用的每个函数调用所产生的应许，并结合在一起。

是这样的：

 函数CallWebService（URI，过滤器）
{
  VAR数据= {};

  如果（过滤器和放大器;＆安培;！筛选=''）
    数据['$过滤器'] =过滤器;

  返回jQuery.ajax（{
    网址：'/ _api /列表/+ URI +'/项目，
    数据：数据，
    数据类型：JSON
  }）;
}

传播getGreenData（）{
  返回CallWebService（GreenData，从InitialData过滤器）;
}

传播getRedData（）{
  返回CallWebService（RedData，从InitialData过滤器）;
}

传播GetInitialData（）{
    返回CallWebService（InitialData，）。然后（GetGreenData）;
}

//获取绿色数据顺序则红色数据
传播GetFinalData（）{
    返回getGreenData（），然后（getRedData）。
}

//调用最后一节
GetFinalData（）。完成（功能（greendata，reddata）{
     警报（全部完成！）;
}）;
 

要并行运行的承诺，立即评估功能，让所得的承诺结合 $当：

例如。

  //获取绿色数据和并行红色数据
传播GetFinalData（）{
    返回$。当（getGreenData（），getRedData（））;
}
 

I don't quite understand magic deferred objects with jQuery. Assume the following code:

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

The order I want to do things is like so - in the end I will call four webservices whereas the calls depend on each other (one long chain):

1. Call getInitialData
2. Call getGreenData with dependency on getInitialData
3. Call getRedData with dependency on getInitialData
4. Call getFinalData with dependencies on getGreenData and getRedData

As you can tell 2 & 3 could happen simultaneously. I'm thinking I can use jQuery.when() (or resolve?), I just don't know how to apply it here. I think I need to rework the functions to always return the ajax object?

Pseude-code would look like this:

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

解决方案

$.ajax returns a jQuery promise. You can then call then on that promise to chain completion to a function. The ajax data is passed as the promise parameter to any final callback function. That is because $.ajax "promises to return the Ajax data".

If you follow the same pattern for all your functions you can chain everything as you wanted. By not calling the functions, or adding anonymous callbacks, it simply uses the resulting promises from each function call and combines them together.

Something like:

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

To run promises in parallel, evaluate the functions immediately and let the resulting promises combine with $.when:

e.g.

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

这篇关于jQuery的AJAX调用多个依赖链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！