Как связать запросы ajax?
Я должен взаимодействовать с удаленным api, который заставляет меня связывать запросы. Это обратный вызов-ад в асинхронном режиме:
// pseudocode: ajax(request_object, callback)
ajax(a, function() {
ajax(b(a.somedata), function() {
ajax(c(b.somedata), function() {
c.finish()
}
})
})
это было бы гораздо более читаемым в режиме синхронизации:
sjax(a)
sjax(b(a.somedata))
sjax(c(b.somedata))
c.finish()
но Sjax это зло :) как мне это сделать в хороший не-так-злой и четкий способ?
9 ответов
Не используйте анонимные функции. Дайте им имена. Я не знаю, можете ли вы сделать то, что я написал ниже:
var step_3 = function() {
c.finish();
};
var step_2 = function(c, b) {
ajax(c(b.somedata), step_3);
};
var step_1 = function(b, a) {
ajax(b(a.somedata), step_2);
};
ajax(a, step_1);
у вас может быть одна функция, которая передается целым числом, чтобы указать, на каком шаге находится запрос, а затем использовать оператор switch, чтобы выяснить, какой запрос должен быть следующим:
function ajaxQueue(step) {
switch(step) {
case 0: $.ajax({
type: "GET",
url: "/some/service",
complete: function() { ajaxQueue(1); }
}); break;
case 1: $.ajax({
type: "GET",
url: "/some/service",
complete: function() { ajaxQueue(2); }
}); break;
case 2: $.ajax({
type: "GET",
url: "/some/service",
complete: function() { alert('Done!'); }
}); break;
}
}
ajaxQueue(0);
надеюсь, что это поможет!
эта функция должна объединять список запросов AJAX, если эти функции всегда возвращают параметры, необходимые для следующего запроса:
function chainajax(params, callbacks) {
var cb = shift(callbacks);
params.complete = function() {
var newparams = cb(arguments);
if (callbacks)
chainajax(newparams, callbacks);
};
$.ajax(params);
};
вы можете определить эти функции обратного вызова отдельно, а затем связать их вместе:
function a(data) {
...
return {type: "GET", url: "/step2.php?foo"}
};
// ...
function d(data) { alert("done!"); };
chainajax({type: "GET", url: "/step1.php"},
[a, b, c, d]);
вы также можете объявить функции "inline" в вызове chainajax, но это может немного запутать.
возможно, вы можете написать функцию обертки на стороне сервера. Таким образом, ваш javascript выполняет только один асинхронный вызов на ваш собственный веб-сервер. Затем ваш веб-сервер использует curl (или urllib и т. д.) для взаимодействия с удаленным API.
Update: я узнал лучший ответ для этого, если вы используете jQuery, см. мое обновление под заголовком: Using jQuery Deffered
ответ:
вы также можете использовать Array.reduceRight
(когда он доступен), чтобы обернуть $.ajax
вызовы и преобразование списка, как:[resource1, resource2]
на $.ajax({url:resource1,success: function(...) { $ajax({url: resource2...
(трюк, который я узнал от Haskell, и это функция fold/foldRight).
вот пример:
var withResources = function(resources, callback) {
var responses = [];
var chainedAjaxCalls = resources.reduceRight(function(previousValue, currentValue, index, array) {
return function() {
$.ajax({url: currentValue, success: function(data) {
responses.push(data);
previousValue();
}})
}
}, function() { callback.apply(null, responses); });
chainedAjaxCalls();
};
затем вы можете использовать:
withResources(['/api/resource1', '/api/resource2'], function(response1, response2) {
// called only if the ajax call is successful with resource1 and resource2
});
использование jQuery Deffered
если вы используете jQuery, вы можете воспользоваться jQuery Deffered, С помощью jQuery.when()
функция:
jQuery.when($.get('/api/one'), $.get('/api/two'))
.done(function(result1, result2) {
/* one and two is done */
});
проверьте этот пункт FAQ на сайте jQuery. специально ссылка обратного вызова и полный метод.
то, что вы хотите, это данные из A, которые будут переданы в B и B данные, переданные в C. Так что вы сделали бы обратный вызов по завершении.
Я не пробовал это, хотя.
Я считаю, что реализация государственной машины сделает код более читабельным:
var state = -1;
var error = false;
$.ajax({success: function() {
state = 0;
stateMachine(); },
error: function() {
error = true;
stateMachine();
}});
function stateMachine() {
if (error) {
// Error handling
return;
}
if (state == 0) {
state = 1;
// Call stateMachine again in an ajax callback
}
else if (state == 1) {
}
}
Я сделал метод, используя обещания
// How to setup a chainable queue method
var sequence = Promise.resolve();
function chain(next){
var promise = new Promise(function(resolve){
sequence.then(function(){
next(resolve);
});
});
sequence = promise;
}
// How to use it
chain(function(next){
document.write("<p>start getting config.json</p>");
setTimeout(function(){
document.write("<p>Done fetching config.json</p>");
next();
}, 3000);
});
chain(function(next){
document.write("<p>start getting init.js</p>")
setTimeout(function(){
document.write("<p>starting eval scripting</p>");
next();
}, 3000);
});
chain(function(next){
document.write("<p>Everything is done</p>");
});
бонус: a ultraligth 138 byte limited A-Promise (который может разрешать только без параметров и вызывать только последний метод )
фон: Я сделал это ради узлов.js в точке, где его доза не имеет обещаний ATM. Мне не нужна была полноценная библиотека обещаний, от которой я зависел и которую должен был включить в свой пакет.json, мне нужно он должен быть быстрым и легким и делать в основном только одно. Мне это было нужно только для одного (цепочка вещей, как вы хотите)
function Q(a,b){b=this;a(function(){b.then&&b.then();b.then=i});return b}function i(a){a&&a()}Q.prototype={then:function(a){this.then=a}};
как?
// Start with a resolved object
var promise = new Q(function(a){a()});
// equal to
// var promise = Promise.resolve();
// example usage
new Q(function(resolve){
// do some async stuff that takes time
// setTimeout(resolve, 3000);
}).then(function(){
// its done
// can not return a new Promise
}); // <- can not add more then's (it only register the last one)
и для метода очереди chainable
// How to setup a chainable queue method with ultraligth promise
var sequence = new Q(function(a){a()});
function chain(next){
var promise = new Q(function(resolve){
sequence.then(function(){
next(resolve);
});
});
sequence = promise;
}
полный обратный вызов - это то, что вы ищете:
$.ajax({
type: 'post',
url: "www.example.com",
data: {/* Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. */},
success:
function(data) {
/* you can also chain requests here. will be fired if initial request is successful but will be fired before completion. */
},
complete:
function() {
/* For more a more synchronous approach use this callback. Will be fired when first function is completed. */
}
});