Javascript 具有多个依赖项的jQuery ajax调用链
我不太理解jQuery中的神奇对象。假设以下代码:Javascript 具有多个依赖项的jQuery ajax调用链,javascript,jquery,ajax,jquery-deferred,chaining,Javascript,Jquery,Ajax,Jquery Deferred,Chaining,我不太理解jQuery中的神奇对象。假设以下代码: function callWebService(uri, filter, callback) { var data = {}; if (filter && filter != '') data['$filter'] = filter; jQuery.ajax({ url: '/_api/lists/' + uri + '/items', data: data, success: c
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
调用依赖于getInitialData的getGreenData
调用依赖于getInitialData的getRedData
调用依赖于getGreenData和getRedData的getFinalData
正如你所知,2和3可能同时发生。我想我可以使用jQuery.when或resolve?,我只是不知道如何在这里应用它。我想我需要重新编写函数以始终返回ajax对象
伪代码如下所示:
getInitialData().then(getGreenData, getRedData).then(getFinalData)
$.ajax返回jQuery承诺。然后,您可以调用该承诺,将完成链接到函数。ajax数据作为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!");
});
要并行运行承诺,请立即评估函数,并让结果承诺与$结合。当:
e、 g
希望这能更好地了解如何将数据从一个调用传递到下一个调用 首先是callWebService的一个版本,其不同之处在于: 它不接受回调 它返回由$.ajax返回的jqXHR对象 现在你的四个得到。。。功能,不同之处在于: 这些函数接受一个过滤器参数 函数返回一个承诺 回调现在显示为传递给链式结构的参数,而不是传递给callWebService。 回调对返回的数据执行任何必要的操作,重要的是,它会返回数据,从而使数据在调用getInitialData、getGreenData等的承诺链的更下游可用。 最后是控制排序和数据流的主例程
function getAllSortsOfDependentData() {
return getInitialData().then(function (initialData) {
var filter1 = initialData...;//some property of initialData (this may be several lines of code)
var filter2 = initialData...;//some other property of initialData (this may be several lines of code)
var greenPromise = getGreenData(filter1);
var redPromise = getRedData(filter2);
return $.when(greenPromise, redPromise).then(function (greenData, redData) {
var filter3 = greenData...;//some property of greenData (this may be several lines of code)
var filter4 = redData...;//some property of redData (this may be several lines of code)
return getFinalData(filter3, filter4).then(function(finalData) {
//Now a summary object can be returned.
//This is possible due to initialData/greenData/redData being accessible from closures formed by outer functions.
return {
initialData: initialData,
greenData: greenData,
redData: redData,
finalData: finalData
};
});
});
});
}
getAllSortsOfDependentData现在可以按如下方式调用,摘要数据可以在链接的回调中使用。然后:
这是最基本的。在几乎所有函数中,都可以进行各种改进。不要以大写字母开头函数名,这会使堆栈溢出语法高亮显示中的颜色看起来很奇怪!如果您在CallWebService中返回ajax方法,您应该可以访问。然后promisefixed函数名,直接来自MyC环境-您希望这些调用是并行的还是顺序的,因为这一微妙之处改变了我下面的示例?在我的回答中增加了一个类似的例子。对任何拼写错误表示歉意:并行和顺序;-根据您的回答,我的最佳猜测是:getInitialData.whengetGreenData、getRedData.thengetFinalData.donefunction-我只需要找出传递给每个承诺的内容,这样我就可以在完成调用中做一些事情。回答好。我仍然被困在如何将数据从一个呼叫传递到下一个呼叫上。我首先要调用InitialData,然后使用InitialData中的筛选器调用Green和Red data,然后使用Green和Red中的筛选器调用FinalData。一条长长的链。@Dennis G:每个承诺都是返回特定的数据。任何数据都将作为接收函数的参数传递,每个承诺按链接顺序传递一个数据-我相信这还没有完成,但我确实需要创建一个测试应用程序:
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 getInitialData (filter) {
return callWebService("InitialData", filter).then(function (data) {
//do stuff with initial data
return data;
});
}
function getGreenData (filter) {
return callWebService("GreenData", filter).then(function (data) {
//do stuff with green data
return data;
});
}
function getRedData (filter) {
return callWebService("RedData", filter).then(function (data) {
//do stuff with red data
return data;
});
}
function getFinalData (filter) {
return callWebService("FinalData", filter).then(function (data) {
//do stuff with final data
return data;
});
}
function getAllSortsOfDependentData() {
return getInitialData().then(function (initialData) {
var filter1 = initialData...;//some property of initialData (this may be several lines of code)
var filter2 = initialData...;//some other property of initialData (this may be several lines of code)
var greenPromise = getGreenData(filter1);
var redPromise = getRedData(filter2);
return $.when(greenPromise, redPromise).then(function (greenData, redData) {
var filter3 = greenData...;//some property of greenData (this may be several lines of code)
var filter4 = redData...;//some property of redData (this may be several lines of code)
return getFinalData(filter3, filter4).then(function(finalData) {
//Now a summary object can be returned.
//This is possible due to initialData/greenData/redData being accessible from closures formed by outer functions.
return {
initialData: initialData,
greenData: greenData,
redData: redData,
finalData: finalData
};
});
});
});
}
getAllSortsOfDependentData().then(function(dataObject) {
//Everything above is complete.
//If required, all the fetched data is available here as properties of `dataObject`
//dataObject.initialData
//dataObject.greenData
//dataObject.redData
//dataObject.finalData
});