如何使用 jQuery 承诺链接三个异步调用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16026942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I chain three asynchronous calls using jQuery promises?
提问by John Mcdock
I have three HTTP calls that need I need to make in a synchronous manner and how do I pass data from one call to the other?
我需要以同步方式进行三个 HTTP 调用，如何将数据从一个调用传递到另一个调用？
function first()
{
ajax()
}
function second()
{
ajax()
}
function third()
{
ajax()
}
function main()
{
first().then(second).then(third)
}
I tried to use the deferred for the two functions and I came up with a partial solution. Can I extend it to be for three functions?
我尝试将 deferred 用于这两个函数，并提出了部分解决方案。我可以将其扩展为三个功能吗？
function first() {
var deferred = $.Deferred();
$.ajax({
"success": function (resp)
{
deferred.resolve(resp);
},
});
return deferred.promise();
}
function second(foo) {
$.ajax({
"success": function (resp)
{
},
"error": function (resp)
{
}
});
}
first().then(function(foo){second(foo)})
回答by Beetroot-Beetroot
In each case, return the jqXHR object returned by $.ajax().
在每种情况下，返回由 返回的 jqXHR 对象$.ajax()。
These objects are Promise-compatible so can be chained with .then()/.done()/.fail()/.always().
这些对象是无极兼容，以便在与被链接.then()/ .done()/ .fail()/ .always()。
.then()is the one you want in this case, exactly as in the question.
.then()在这种情况下是你想要的，就像问题中一样。
function first() {
return $.ajax(...);
}
function second(data, textStatus, jqXHR) {
return $.ajax(...);
}
function third(data, textStatus, jqXHR) {
return $.ajax(...);
}
function main() {
first().then(second).then(third);
}
Arguments data, textStatusand jqXHRarise from the $.ajax()call in the previous function, ie. first()feeds second()and second()feeds third().
参数data，textStatus并且jqXHR来自$.ajax()前一个函数中的调用，即。first()饲料second()和second()饲料third()。
DEMO(with $.when('foo')to deliver a fulfilled promise, in place of $.ajax(...)).
DEMO（$.when('foo')用于交付已履行的承诺，代替$.ajax(...)）。
回答by user3242460
There is actually a much easier approach when using promises with jQuery. Have a look at the following:
在 jQuery 中使用 Promise 时，实际上有一种更简单的方法。看看以下内容：
$.when(
$.ajax("/first/call"),
$.ajax("/second/call"),
$.ajax("/third/call")
)
.done(function(first_call, second_call, third_call){
//do something
})
.fail(function(){
//handle errors
});
Simply chain all your calls into the $.when(...) call and handle the return values in the .done(...) call.
只需将所有调用链接到 $.when(...) 调用中并处理 .done(...) 调用中的返回值。
Here's a walkthrough if you prefer: http://collaboradev.com/2014/01/27/understanding-javascript-promises-in-jquery/
如果您愿意，这里有一个演练：http: //collaboradev.com/2014/01/27/understanding-javascript-promises-in-jquery/
回答by prajnavantha
Quite late to reply, but I guess answers are missing some straight forward code for chaining. Chaining events is pretty simple with promise support in jquery. I use the following for chaining:
回复很晚，但我想答案缺少一些用于链接的直接代码。使用 jquery 中的 promise 支持链接事件非常简单。我使用以下链接：
$.ajax()
.then(function(){
return $.ajax() //second ajax call
})
.then(function(){
return $.ajax() //third ajax call
})
.done(function(resp){
//handle final response here
})
It's simple with no complicated for loops or multiple nested callbacks.
它很简单，没有复杂的 for 循环或多个嵌套回调。
回答by SLaks
It's much simpler than that.
它比那简单得多。
$.ajaxalready returns a promise (Deferred object), so you can simply write
$.ajax已经返回一个承诺（延迟对象），所以你可以简单地写
function first() {
return $.ajax(...);
}
回答by Mike Vitik
You can write it in more functional manner:
您可以以更实用的方式编写它：
[function() { return ajax(...)}, function(data) { return ajax(...)}]
.reduce(function(chain, callback) {
if(chain) {
return chain.then(function(data) { return callback(data); });
} else {
return callback();
}
}, null)
回答by Duncan Luk
The best way to do this is by making a reusable function for this. This can even be done with just one line of code using reduce:
最好的方法是为此创建一个可重用的函数。这甚至可以使用一行代码来完成reduce：
function chainPromises(list) {
return list.reduce((chain, func) => chain ? chain.then(func) : func(), null);
}
This function accepts an array of callbacks which return a promise object, like your three functions.
这个函数接受一个回调数组，它返回一个 promise 对象，就像你的三个函数一样。
Example usage:
用法示例：
chainPromises([first, second, third]).then(function (result) {
console.log('All done! ', result);
});
This way the result of firstwill also automatically be the parameter of second, so basically what happens is this:
这样， 的结果也first将自动成为 的参数second，所以基本上会发生这样的事情：
first().then(function(res1) { return second(res1) })
.then(function(res2) { return third(res2) })
.then(function(result) { console.log('All done! ', result) });
And of course you could add as many functions to the array as you want.
当然，您可以根据需要向数组添加任意数量的函数。
回答by MarSoft
I found a good looking solution here: How do I chain a sequence of deferred functions in jQuery 1.8.x?
我在这里找到了一个很好看的解决方案：How do I chain a sequence of deferred functions in jQuery 1.8.x?
And here is my own implementation of similar approach, somewhat ugly but probably working. It broadcasts result of each method as a ?progress update??on returned promise object.
这是我自己的类似方法的实现，有点难看但可能有效。它将每个方法的结果广播为“进度更新”？在返回的承诺对象上。
$.chain = function() {
var defer = $.Deferred();
var funcs = arguments;
var left = funcs.length;
function next(lastResult) {
if(left == 0) {
defer.resolve();
return;
}
var func = funcs[funcs.length - left]; // current func
var prom = func(lastResult).promise(); // for promise will return itself,
// for jquery ojbect will return promise.
// these handlers will be launched in order we specify them
prom.always(function() {
left--;
}).done(function(ret) {
defer.notify({
idx: funcs.length-left,
left: left,
result: ret,
success: true,
});
}).fail(function(ret) {
defer.notify({
idx: funcs.length-left,
left: left,
result: ret,
success: false,
});
}).always(function(ret) {
next(ret);
});
}
next();
return defer.promise();
};
How to use it for your situation? Maybe not beautiful, but it should work:
如何根据您的情况使用它？也许不漂亮，但它应该有效：
function first() {
return ajax(...);
}
var id;
funciton second() {
return ajax(id, ...);
}
function third() {
return ajax(id, ...);
}
$.chain(first, second, third).progress(function(p) {
if(p.func == first)
id = p.result.identifier;
}).then(function() {
alert('everything is done');
});
Or you can just assign that id variable from firstfunction.
或者您可以从first函数中分配该 id 变量。
Or if you only need previous function's result, you can use this approach:
或者，如果您只需要先前函数的结果，则可以使用这种方法：
function first() {
return ajax(...);
}
function second(first_ret) {
return ajax(first_ret.id, ...);
}
function third(second_ret) {
return ajax(second_ret.something, ...);
}
回答by duanev
The following appears to work and allows the list of functions to be dynamic:
以下似乎有效并允许函数列表是动态的：
<html>
<head>
<title>demo chained synchronous calls</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
function one(parms) {
console.log('func one ' + parms);
return 1;
}
function two(parms) {
console.log('func two ' + parms);
return 2;
}
function three(parms) {
console.log('func three ' + parms);
return 3;
}
function four(parms) {
console.log('func four ' + parms);
return 4;
}
var funcs = ['one', 'two', 'three', 'four'];
var rvals = [0];
function call_next_func() {
if (funcs.length == 0) {
console.log('done');
} else {
var funcname = funcs.shift();
console.log(funcname);
rvals.push(window[funcname](rvals));
call_next_func();
}
}
$(document).ready(function($){
call_next_func();
});
</script>
</body>
</html>回答by Dimitris Kougioumtzis
To chain jquery ajax calls i did :
要链接 jquery ajax 调用，我做了：
function A(){
return $.ajax({
url: url,
type: type,
data: data,
datatype: datatype,
success: function(data)
{
code here
}
});
}
function B(){
return $.ajax({
url: url,
type: type,
data: data,
datatype: datatype,
success: function(data)
{
code here
}
});
}
function C(){
return $.ajax({
url: url,
type: type,
data: data,
datatype: datatype,
success: function(data)
{
code here
}
});
}
A().done(function(data){
B().done(function(data){
C();
})
});
回答by MelP
I just had the same problem, chaining ajax calls. After a few days of trying I finally did $.ajax({ async: false,...what completely did what I wanted to archieve. I just not did think of that. It might help others...
我只是遇到了同样的问题，链接 ajax 调用。经过几天的尝试，我终于$.ajax({ async: false,...完成了我想要归档的工作。我只是没想到。它可能会帮助其他人...
