Develop Reference

Perform a set of recursive HTTP GET calls, and wait for them all

I have a REST service, offering a list of 'Json' objects, and each object may potentially have a link for another resource of its own class. Starting with a particular one, I need to fetch them all, performing a recursive http call.
So I wrote:
var steps = [];
var recursiveLookup = function(processId) {
return $.ajax({
url: SERVER_URL + processId,
success: function (activity) {
// Activity has a set of json objects called steps
var rtn = activity.path.map(step => {
if (step.type != "Node") {
steps.push(step);
} else {
return recursiveLookup(step.subProcessIntanceId);
}
}).filter(a => a != undefined);
return rtn;
}
});
}
That would correctly load all objects into the global steps var.
I need to be sure the method has finished, so I wrote:
var promises = recursiveLookup(processId);
Promise.all(promises).then(function () {
console.log(steps);
});
But it's not working, as the 'recursiveLookup' is returning the promise of $.ajax, instead of the set of promises pretended to be returned with the success method.
Furthermore, is it possible to get the steps as a returned value from the 'recursiveLookup' method instead, of using it as a global variable?

Nested recursion is not within my confort zone but maybe this will work:
var recursiveLookup = function(processId,steps=[]) {
return $.ajax({
url: SERVER_URL + processId,
})
.then(
function (activity) {
// Activity has a set of json objects called steps
steps = steps.concat(
activity.path.filter(
step => step.type !== "Node"
)
);
return Promise.all(
activity.path.filter(
step => step.type === "Node"
)
.map(
step=>
recursiveLookup(step.subProcessIntanceId,steps)
)
).then(
result=>steps.concat(result)
)
}
);
}
For tail call optimization to work the last thing the function does should be to call the recursive function but I think in promise chains it doesn't matter too much.

You should not use the success parameter if you want to work with promises. Instead, you want to return a promise, and you want to use then to transform the results of a promise into something different, possibly even another promise.
function request(page) {
…
// return the AJAX promise
return $.ajax({
url: '/echo/json/',
method: 'POST',
dataType: 'json',
data: {
delay: 1,
json: JSON.stringify(ret)
}
});
}
function requestOddsFrom(page, items) {
return request(page).then(function(data){
if (data.currentPage > data.totalPage) {
return items;
} else {
var filtered = data.items.filter(function(el){ return el%2 == 1; });
return requestOddsFrom(data.currentPage + 1, items.concat(filtered));
}
});
}
function requestAll(){
return requestOddsFrom(1, []);
}
requestAll().then(function(items) {
console.dir(items);
});
for more info jQuery Recursive AJAX Call Promise
How do I return the response from an asynchronous call?

Applying condition to jQuery.when() deferred functions

I would like to apply a condition to each deferred request within a $.when() function (before the request is made). However placing an if condition inside $.when returns an error.
What would be the proper way to do what I essentially describe bellow?
$.when(
if(var1) {
$.getJSON(url1, function(data) {...}),
},
if(var2) {
$.getJSON(url2, function(data) {...}),
},
if(varN) {
$.getJSON(urlN, function(data) {...}),
},
).then(function() {
...
});

You can simply construct an array of AJAX promises instead. After that, use $.when.apply($, <yourArray>). To illustrate the solution, here is an example based on the code you have provided:
// Construct array to store requests
var requests = [];
// Conditionally push your deferred objets into the array
if(var1) requests.push($.getJSON(url1, function(data) {...}));
if(var2) requests.push($.getJSON(url2, function(data) {...}));
if(var3) requests.push($.getJSON(url3, function(data) {...}));
// Apply array to $.when()
$.when.apply($, requests).then(function() {
// Things to do when all is done
});
What that in mind, here is a code snippet that shows a proof-of-concept example: I am using dummy JSON returned by JSONPlaceholder:
$(function() {
// Construct array to store requests
var requests = [];
// Conditional vars
var var1 = true,
var2 = false,
var3 = true;
// Conditionally push your deferred objets into the array
if (var1) requests.push($.get('https://jsonplaceholder.typicode.com/posts/1', function(data) { return data;
}));
if (var2) requests.push($.get('https://jsonplaceholder.typicode.com/posts/2', function(data) { return data;
}));
if (var3) requests.push($.get('https://jsonplaceholder.typicode.com/posts/3', function(data) { return data;
}));
// Apply array to $.when()
$.when.apply($, requests).then(function(d) {
// Log returned data
var objects = arguments;
console.log(objects);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use ternary operator in $when(). The below code worked for me:
var includeX = true, includeY = false;
var x = $.get('check.html');
var y = $('div').animate({height: '200px'}, 3000).promise(); // you may use an ajax request also here
$.when(includeX ? x : '', includeY ? y: '').done(function(){
console.log(x);
console.log(y);
console.log('done');
})

Promises not resolved in a .each() loop

I've got to run a recursive process and the promises are not working as I want. This is the code:
var openAllLeves = function () {
openAll = 1;
$.when(openLevels()).then(openAll = 0);
}
var openLevels = function () {
var promises = [];
$('.myClass:not([data-type="T"])').each(function () {
var defer = $.Deferred();
$.when(loadLine($(this)).then(promises.push(defer)));
});
return $.when.apply(undefined, promises).promise();
}
var loadLine = function (thisObj) {
var defer = $.Deferred();
switch(nivel) {
case 1:
$.when(getPT($(thisObj).attr('data-a'))).then(defer.resolve());
break;
case 2:
// ...
}
return defer.promise();
}
var getPT = function (psn) {
var defer = $.Deferred();
var payload = { /* parameters... */ };
$.ajax({
url: webmethod,
data: payload,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
timeout: 10000,
success: function (data) {
$.when(paintPT(data)).then(function () {
if (openAll)
openLevels(), defer.resolve();
});
}
});
return defer.promise();
}
My problem is that openAll's value changes to 0 before being evaluated in the ajax function success code so only one iteration is performed and the recursivity is not done. It looks like .then is performed before resolving the array of promises.
The code is a little bit confusing so any help is appreciated.
Thanks in advance.

Avoid the deferred antipattern!
Also, when you pass something to .then(), it must be callback function, calling promises.push(defer), defer.resolve() and openAll = 0 or so does not work, it would execute that expression right away instead of waiting for the promise.
The $.when() and .promise() calls are mostly superfluous. Drop them.
function openAllLeves () {
openAll = 1;
openLevels().then(function() {
openAll = 0
});
}
function openLevels() {
var promises = [];
$('.myClass:not([data-type="T"])').each(function () { // using `map` would be even better
promises.push(loadLine($(this)));
});
return $.when.apply($, promises);
}
function loadLine(thisObj) {;
switch(nivel) {
case 1:
return getPT($(thisObj).attr('data-a'))
case 2:
// ...
}
}
function getPT(psn) {
var payload = { /* parameters... */ };
return $.ajax({
url: webmethod,
data: payload,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
timeout: 10000,
}).then(function (data) {
return paintPT(data);
}).then(function () {
if (openAll)
openLevels();
});
}
Btw, you will probably want to chain the if (openAll) openLevels(); to the return value of openLevels(), not to each single request promise.

One big problem in your code is that you're calling the functions on the then callback and not passing them to it. For instance:
.then(defer.resolve());
This way you are passing the value of defer.resolve() to the then callback and not the function that should be called when the async action finished. You should be doing something like this:
.then(defer.resolve.bind(defer));
The same applies for the rest of the code.
You should take a look at the promise spec
Particularly
If onFulfilled is not a function, it must be ignored.
EDIT
As pointed out by Bergi you should avoid the deferred antipattern.

Thank you both for your responses. I'm working on this changes. This way, I understand that .then() only waits for the promise when a function is passed. So the right way to resolve a promise in .then() would be..
.then(function() {
defer.resolve();
})
¿?

Multiple Promise Chains in Single Function

I have some code that will dynamically generate an AJAX request based off a scenario that I'm retrieving via an AJAX request to a server.
The idea is that:
A server provides a "Scenario" for me to generate an AJAX Request.
I generate an AJAX Request based off the Scenario.
I then repeat this process, over and over in a Loop.
I'm doing this with promises here: http://jsfiddle.net/3Lddzp9j/11/
However, I'm trying to edit the code above so I can handle an array of scenarios from the initial AJAX request.
IE:
{
"base": {
"frequency": "5000"
},
"endpoints": [
{
"method": "GET",
"type": "JSON",
"endPoint": "https://api.github.com/users/alvarengarichard",
"queryParams": {
"objectives": "objective1, objective2, objective3"
}
},
{
"method": "GET",
"type": "JSON",
"endPoint": "https://api.github.com/users/dkang",
"queryParams": {
"objectives": "objective1, objective2, objective3"
}
}
]
This seems like it would be straight forward, but the issue seems to be in the "waitForTimeout" function.
I'm unable to figure out how to run multiple promise chains. I have an array of promises in the "deferred" variable, but the chain only continues on the first one--despite being in a for loop.
Could anyone provide insight as to why this is? You can see where this is occuring here: http://jsfiddle.net/3Lddzp9j/10/

The main problems are that :
waitForTimeout isn't passing on all the instructions
even if waitForTimeout was fixed, then callApi isn't written to perform multiple ajax calls.
There's a number of other issues with the code.
you really need some data checking (and associated error handling) to ensure that expected components exist in the data.
mapToInstruction is an unnecessary step - you can map straight from data to ajax options - no need for an intermediate data transform.
waitForTimeout can be greatly simplified to a single promise, resolved by a single timeout.
synchronous functions in a promise chain don't need to return a promise - they can return a result or undefined.
Sticking with jQuery all through, you should end up with something like this :
var App = (function ($) {
// Gets the scenario from the API
// sugar for $.ajax with GET as method - NOTE: this returns a promise
var getScenario = function () {
console.log('Getting scenario ...');
return $.get('http://demo3858327.mockable.io/scenario2');
};
var checkData = function (data) {
if(!data.endpoints || !data.endpoints.length) {
return $.Deferred().reject('no endpoints').promise();
}
data.base = data.base || {};
data.base.frequency = data.base.frequency || 1000;//default value
};
var waitForTimeout = function(data) {
return $.Deferred(function(dfrd) {
setTimeout(function() {
dfrd.resolve(data.endpoints);
}, data.base.frequency);
}).promise();
};
var callApi = function(endpoints) {
console.log('Calling API with given instructions ...');
return $.when.apply(null, endpoints.map(ep) {
return $.ajax({
type: ep.method,
dataType: ep.type,
url: ep.endpoint
}).then(null, function(jqXHR, textStatus, errorThrown) {
return textStatus;
});
}).then(function() {
//convert arguments to an array of results
return $.map(arguments, function(arg) {
return arg[0];
});
});
};
var handleResults = function(results) {
// results is an array of data values/objects returned by the ajax calls.
console.log("Handling data ...");
...
};
// The 'run' method
var run = function() {
getScenario()
.then(checkData)
.then(waitForTimeout)
.then(callApi)
.then(handleResults)
.then(null, function(reason) {
console.error(reason);
})
.then(run);
};
return {
run : run
}
})(jQuery);
App.run();
This will stop on error but could be easily adapted to continue.

I'll try to answer your question using KrisKowal's q since I'm not very proficient with the promises generated by jQuery.
First of all I'm not sure whether you want to solve the array of promises in series or in parallel, in the solution proposed I resolved all of them in parallel :), to solve them in series I'd use Q's reduce
function getScenario() { ... }
function ajaxRequest(instruction) { ... }
function createPromisifiedInstruction(instruction) {
// delay with frequency, not sure why you want to do this :(
return Q.delay(instruction.frequency)
.then(function () {
return this.ajaxRequest(instruction);
});
}
function run() {
getScenario()
.then(function (data) {
var promises = [];
var instruction;
var i;
for (i = 0; i < data.endpoints.length; i += 1) {
instruction = {
method: data.endpoints[i].method,
type: data.endpoints[i].type,
endpoint: data.endpoints[i].endPoint,
frequency: data.base.frequency
};
promises.push(createPromisifiedInstruction(instruction));
}
// alternative Q.allSettled if all the promises don't need to
// be fulfilled (some of them might be rejected)
return Q.all(promises);
})
.then(function (instructionsResults) {
// instructions results is an array with the result of each
// promisified instruction
})
.then(run)
.done();
}
run();
Ok let me explain the solution above:
first of all assume that getScenario gets you the initial json you start with (actually returns a promise which is resolved with the json)
create the structure of each instruction
promisify each instruction, so that each one is actually a promise whose
resolution value will be the promise returned by ajaxRequest
ajaxRequest returns a promise whose resolution value is the result of the request, which also means that createPromisifiedInstruction resolution value will be the resolution value of ajaxRequest
Return a single promise with Q.all, what it actually does is fulfill itself when all the promises it was built with are resolved :), if one of them fails and you actually need to resolve the promise anyways use Q.allSettled
Do whatever you want with the resolution value of all the previous promises, note that instructionResults is an array holding the resolution value of each promise in the order they were declared
Reference: KrisKowal's Q

Try utilizing deferred.notify within setTimeout and Number(settings.frequency) * (1 + key) as setTimeout duration; msg at deferred.notify logged to console at deferred.progress callback , third function argument within .then following timeout
var App = (function ($) {
var getScenario = function () {
console.log("Getting scenario ...");
return $.get("http://demo3858327.mockable.io/scenario2");
};
var mapToInstruction = function (data) {
var res = $.map(data.endpoints, function(settings, key) {
return {
method:settings.method,
type:settings.type,
endpoint:settings.endPoint,
frequency:data.base.frequency
}
});
console.log("Instructions recieved:", res);
return res
};
var waitForTimeout = function(instruction) {
var res = $.when.apply(instruction,
$.map(instruction, function(settings, key) {
return new $.Deferred(function(dfd) {
setTimeout(function() {
dfd.notify("Waiting for "
+ settings.frequency
+ " ms")
.resolve(settings);
}, Number(settings.frequency) * (1 + key));
}).promise()
})
)
.then(function() {
return this
}, function(err) {
console.log("error", err)
}
, function(msg) {
console.log("\r\n" + msg + "\r\nat " + $.now() + "\r\n")
});
return res
};
var callApi = function(instruction) {
console.log("Calling API with given instructions ..."
, instruction);
var res = $.when.apply(instruction,
$.map(instruction, function(request, key) {
return request.then(function(settings) {
return $.ajax({
type: settings.method,
dataType: settings.type,
url: settings.endpoint
});
})
})
)
.then(function(data) {
return $.map(arguments, function(response, key) {
return response[0]
})
})
return res
};
var handleResults = function(data) {
console.log("Handling data ..."
, JSON.stringify(data, null, 4));
return data
};
var run = function() {
getScenario()
.then(mapToInstruction)
.then(waitForTimeout)
.then(callApi)
.then(handleResults)
.then(run);
};
return {
// This will expose only the run method
// but will keep all other functions private
run : run
}
})($);
// ... And start the app
App.run();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
jsfiddle http://jsfiddle.net/3Lddzp9j/13/

You have a return statement in the loop in your waitForTimeout function. This means that the function is going to return after the first iteration of the loop, and that is where you are going wrong.
You're also using the deferred antipattern and are using promises in places where you don't need them. You don't need to return a promise from a then handler unless there's something to await.
The key is that you need to map each of your instructions to a promise. Array#map is perfect for this. And please use a proper promise library, not jQuery promises (edit but if you absolutely must use jQuery promises...):
var App = (function ($) {
// Gets the scenario from the API
// NOTE: this returns a promise
var getScenario = function () {
console.log('Getting scenario ...');
return $.get('http://demo3858327.mockable.io/scenario');
};
// mapToInstructions is basically unnecessary. each instruction does
// not need its own timeout if they're all the same value, and you're not
// reshaping the original values in any significant way
// This wraps the setTimeout into a promise, again
// so we can chain it
var waitForTimeout = function(data) {
var d = $.Deferred();
setTimeout(function () {
d.resolve(data.endpoints);
}, data.base.frequency);
return d.promise();
};
var callApi = function(instruction) {
return $.ajax({
type: instruction.method,
dataType: instruction.type,
url: instruction.endPoint
});
};
// Final step: call the API from the
// provided instructions
var callApis = function(instructions) {
console.log(instructions);
console.log('Calling API with given instructions ...');
return $.when.apply($, instructions.map(callApi));
};
var handleResults = function() {
var data = Array.prototype.slice(arguments);
console.log("Handling data ...");
};
// The 'run' method
var run = function() {
getScenario()
.then(waitForTimeout)
.then(callApis)
.then(handleResults)
.then(run);
};
return {
run : run
}
})($);
App.run();

Unable to get property 'then' using promises

I want to have the most clear code into my app. So I decided to separate the xhr call and the parsing from the view.js.
To do so I added :
In View.js
this._pagePromises.push(myapp.Services.Foo.getFoo()
.then(
function success(results) {
var x = results;
},
function error() {
// TODO - handle the error.
}
));
And in Services.js
Foo:
{
getFoo: function () {
WinJS.xhr({ url: "http://sampleurl.com" }).done(
function completed(request) {
//parse request
var obj = myapp.Parser.parse(request);
return obj;
},
function error(request) {
// handle error conditions.
}
);
}
}
But I have this exception :
0x800a138f - JavaScript runtime error: Unable to get property 'then'
of undefined or null reference
What I want there is :
Start the promise in view.js do some stuff and update the view when getFoo() is completed. I'm not doing this the right way but as a C# developper I have some difficulties to understand this pattern.
Edit :
There is my updated code:
getFoo: function () {
var promise = WinJS.xhr({ url: myapp.WebServices.getfooUrl() });
promise.done(
function completed(request) {
var xmlElements = request.responseXML;
var parser = new myapp.Parser.foo();
var items = parser.parse(xmlElements);
return items;
},
function error(request) {
// handle error conditions.
}
);
return promise;
}
It solved my issue about the 'then' but "return promise" is called before the "return items". So my "caller" does only get the promise and not his result.
What did I miss ?
Edit 2 :
There is the correct way to do this :
Foo:
{
getFooAsync: function () {
return WinJS.Promise.wrap(this.getXmlFooAsync().then(
function completed(request) {
var xmlElements = request.responseXML;
var parser = new myapp.Parser.Foo();
var items = parser.parse(xmlElements);
return items;
}
));
},
getXmlFooAsync: function () {
return WinJS.xhr({ url: "http://sampleurl.com" });
}
}

A more compact way of doing this is to have your function return the return value from WinJS.xhr().then(). What this does is return a promise that will be fulfilled with the return value of your inner completed handler:
Foo:
{
getFooAsync: function () {
return WinJS.xhr({ url: "http://sampleurl.com" }).then(
function completed(request) {
var xmlElements = request.responseXML;
var parser = new myapp.Parser.Foo();
var items = parser.parse(xmlElements);
return items;
}
));
},
}
The caller can then use then/done on the promise it gets from getFooAsync, and the result in the completed handler will be items as returned by the completed handler. (You would not use .done inside this function because you're wanting to return a promise.)
This is the specified behavior of then in Promises-A, to allow for chaining. For more on this, see my post on the Windows 8 Developer Blog, http://blogs.msdn.com/b/windowsappdev/archive/2013/06/11/all-about-promises-for-windows-store-apps-written-in-javascript.aspx.