Develop Reference

Javascript esriRequest (dojo) in a function async issue

I am facing the following synchronization issue. I wouldn't be surprised if it has a simple solution/workaround. The BuildMenu() function is called from another block of code and it calls the CreateMenuData() which makes a request to a service which return some data. The problem is that since it is an async call to the service when the data variable is being used it is undefined. I have provided the js log that also shows my point.
BuildMenu: function () {
console.log("before call");
var data=this.CreateMenuData();
console.log("after call");
//Doing more stuff with data that fail.
}
CreateMenuData: function () {
console.log("func starts");
data = [];
dojo.forEach(config.layerlist, function (collection, colindex) {
var layersRequest = esriRequest({
url: collection.url,
handleAs: "json",
});
layersRequest.then(
function (response) {
dojo.forEach(response.records, function (value, key) {
console.log(key);
data.push(key);
});
}, function (error) {
});
});
console.log("func ends");
return data;
}
Console log writes:
before call
func starts
func ends
after call
0
1
2
3
4

FYI: using anything "dojo." is deprecated. Make sure you are pulling all the modules you need in "require".
Ken has pointed you the right direction, go through the link and get familiarized with the asynchronous requests.
However, I'd like to point out that you are not handling only one async request, but potentionally there might be more of them of which you are trying to fill the "data" with. To make sure you handle the results only when all of the requests are finished, you should use "dojo/promise/all".
CreateMenuData: function (callback) {
console.log("func starts");
requests = [];
data = [];
var scope = this;
require(["dojo/_base/lang", "dojo/base/array", "dojo/promise/all"], function(lang, array, all){
array.forEach(config.layerlist, function (collection, colindex) {
var promise = esriRequest({
url: collection.url,
handleAs: "json",
});
requests.push(promise);
});
// Now use the dojo/promise/all object
all(requests).then(function(responses){
// Check for all the responses and add whatever you need to the data object.
...
// once it's all done, apply the callback. watch the scope!
if (typeof callback == "function")
callback.apply(scope, data);
});
});
}
so now you have that method ready, call it
BuildMenu: function () {
console.log("before call");
var dataCallback = function(data){
// do whatever you need to do with the data or call other function that handles them.
}
this.CreateMenuData(dataCallback);
}

Shared variables in asynchronous function calls

Is there a basic way to share a variable between two asynchronous functions in Javascript? I'm writing a function for my Parse.com application that sends two queries concurrently and the second waits on the results of the former. I've been using a basic shared boolean and a busy-wait loop, but the loop does not terminate if the boolean value was not set before the start of the loop (but does if it was set before, so the state is in fact being shared across the two callbacks). This makes me think that I need some form of a "volatile" variable but it does not seem that this exists in Javascript, seeing as there are not really threading capabilities/optimizations like this. If it helps, I've added some abbreviated code to help explain what I'm doing:
var firstQueryDone = false;
var firstResultsError = false;
var foundUser;
var foundFollowers;
...
[put some constraints on the query]
...
followersQuery.first({
success: function(followers) {
....
firstQueryDone = true;
},
error: function(error) {
firstResultsError = true;
response.error(error);
}
});
.....
[constraints on new query]
.....
commentsQuery.find({
success: function(comments) {
while(!firstQueryDone && !firstResultsError);
if(!firstResultsError) {
.....
} else {
......
}
},
error: function(error) {
response.error(error);
}
});

I wouldn't use a busy wait-loop. Instead, have both success and error callbacks call store their state then call an external method that handles.
var fComplete = false,
sComplete = false,
didError = false;
#.first(
success: function () {
fComplete = true;
checkMethod();
},
error: function() {
fComplete = true;
didError = true;
checkMethod();
}
);
#.second(
success: function() {
sComplete = true;
checkMethod();
},
error: function() {
sComplete = true;
didError = true;
checkMethod();
}
);
function checkMethod() {
if(fComplete && sComplete) {
if(didError) {
//Handle error
} else {
//Do success here
}
}
}
This way, you don't have a wait loop hogging some resources, and you simply have state changes and onStateChange events.

I think using an object instead of a primitive might help
eg:
var firstQueryStatus = {
qryDone: false,
qryError: false
};

Dojo using deferred functions to get data in ajax callback function

I have a function with a return however in the function there is an async request which holds the value that is suppose to be returned by the function. I understand with the nature of async request the function will complete and not return a value while waiting on the async function to complete.
I attempted to use dojo deferred functions to have my function PostInformation() to return a value within the ajax request callback. I am having some issues and i am not sure where my issue is. Under is my code:
Dojo Deferred Function
function PostInformation(){
var hasErrors = false;
var containers = [dijit.byId("container1"), dijit.byId("container2")];
var Employee = {
//data
};
var def = new dojo.Deferred();
def = dojo.xhrPost({
url: 'hello',
content: Employee,
load: function (data) {
formErrors = {
"errors": true,
"fName": "123",
"surname": "456",
"oNames": "789",
"bSurname": "784585"
};
//formErrors = (JSON.parse(data)).formErrors;
$.each(formErrors, function (key, value) {
if (key == 'errors') {
hasErrors = value;
//console.log('hasErrors set to '+value);
}
});
if (hasErrors == true) {
for (var i = 0; i < containers.length; i++) {
var processingContainer = containers[i];
dojo.forEach(processingContainer.getChildren(), function (wid) {
var widgetName = wid.attr('id');
$.each(formErrors, function (key, value) {
if (key == widgetName && value.length > 0) {
var myWidget = dijit.byId(widgetName);
//var wdgName = dijit.byId(widgetName).attr("id");
var myWidgetValue = value;
myWidget.validator = function () {
//console.log('Attribute Name is :' + wdgName + ' Error Value is : ' + myWidgetValue);
//console.log(wdgName + " : "+myWidgetValue);
this.set("invalidMessage", myWidgetValue);
};
myWidget._hasBeenBlurred = true;
myWidget.validate();
}
});
});
}
}
console.log(hasErrors);
def.resolve(hasErrors);
},
error: function(err){
console.log(err);
def.reject(err);
}
});
def.then(function(data){
console.log('In the then function');
//alert('In the def.then and the results is : ' + data);
if(data == true){
return false;
}else{return true;}
},function(err){
return false;
alert('In the def.error and there has been an error ' + err);
});
//return the value of hasErrors here
};

Devdar, you are making heavy wether out of something quite simple. In particular, you don't need to loop through an object to access one of its properties, and the variable hasErrors is not really necessary.
Your code should simplify to something like this :
function PostInformation() {
var $containers = $("#container1, #container2");
var Employee = {
//data
};
return dojo.xhrPost({
url: 'hello',
content: Employee
}).then(function(data) {
data = JSON.parse(data);
var formErrors = data.formErrors;
if(formErrors.errors) {
$containers.each(function(i, c) {
$(c).children().each(function(wid) {
var val = formErrors[wid.id],
myWidget;
if(val) {
myWidget = dijit.byId(wid.id);
myWidget.validator = function() {
this.set("invalidMessage", val);
};
myWidget._hasBeenBlurred = true;
myWidget.validate();
}
});
});
//Send an enhanced error object down the "error" route
throw $.extend(formErrors, {
'message': 'PostInformation(): validation failure'
});
}
//Send the data object down the "success" route
return data;
});
};
PostInformation().then(function(data) {
console.log('PostInformation(): everything went OK');
//access/process `data` here if necessary
//and/or just display a nice "success" message to the user
}, function(err) {
console.error(err.message);
});
Barring mistakes on my part, this code should do everything you want and more. As with your own code, it processes the server's JSON response and returns a Promise, but that's where the similarity stops.
In your code, you seek to return a Promise which is eventually resolved with a boolean to indicate whether or not errors were detected. Whilst this will (if correctly written) meet your immediate needs, it is not the best Promise logic.
In my code, the Promise is resolved only if validation succeeds and rejected if validation fails for whatever reason. Not only is this logically correct behaviour for a Promise (success goes down the success route, and errors go down the error route) but as a bonus should (see note below) also allow you to pass more information to whetever function(s) eventually handle errors. I choose to pass the whole formErrors object enhanced with an error message, thus providing a great deal of freedom in the error handler to display/log/etc as much or as little as is appropriate, and with virtually no assumption inside PostInformation() as to what will happen subsequently. You currently believe that you will only read and act on the boolean formErrors.errors but it could be beneficial to pass as much error data as possible thus allowing yourself the freedom to change your mind at a later date without needing to change anything in PostInformation().
In this regard you can think of PostInformation() as an agent of the server-side service; and like that service, it can be written with incomplete knowledge (or maybe no knowledge at all) of how the (promise of) data/errors it delivers will be used by "consumer code".
NOTE: I have to admit that I'm not 100% familiar with Dojo's Promises, so I'm not sure that a JS plain object can be thrown in the way I indicate. I have found evidence but not proof that it can. For that reason, I am cautious above in saying "your code should simplify to something like this" Anyway, that issue aside, the principle of sending success down the success route and errors down the error route should still apply.

I'd suggest this where you create your own Deferred() object, return it from your PostInformation() function and then register .then() handlers on it so you can pick up the resolve or reject on your own Deferred object that happens inside the PostInformation() function.
The way you had it you were creating your own Deferred() object, but then immediately overwriting it with the xhrPost return result which meant def is now something else and you weren't returning your Deferred from PostInformation() so it can be used outside that function to track the progress.
function PostInformation() {
var hasErrors = false;
var containers = [dijit.byId("container1"), dijit.byId("container2")];
var Employee = {
//data
};
var def = new dojo.Deferred();
dojo.xhrPost({
url: 'hello',
content: Employee,
load: function (data) {
formErrors = {
"errors": true,
"fName": "123",
"surname": "456",
"oNames": "789",
"bSurname": "784585"
};
//formErrors = (JSON.parse(data)).formErrors;
$.each(formErrors, function (key, value) {
if (key == 'errors') {
hasErrors = value;
//console.log('hasErrors set to '+value);
}
});
if (hasErrors == true) {
for (var i = 0; i < containers.length; i++) {
var processingContainer = containers[i];
dojo.forEach(processingContainer.getChildren(), function (wid) {
var widgetName = wid.attr('id');
$.each(formErrors, function (key, value) {
if (key == widgetName && value.length > 0) {
var myWidget = dijit.byId(widgetName);
//var wdgName = dijit.byId(widgetName).attr("id");
var myWidgetValue = value;
myWidget.validator = function () {
//console.log('Attribute Name is :' + wdgName + ' Error Value is : ' + myWidgetValue);
//console.log(wdgName + " : "+myWidgetValue);
this.set("invalidMessage", myWidgetValue);
};
myWidget._hasBeenBlurred = true;
myWidget.validate();
}
});
});
}
}
console.log(hasErrors);
def.resolve(hasErrors);
},
error: function (err) {
console.log(err);
def.reject(err);
}
});
return def.promise;
};
PostInformation().then(function (data) {
console.log('In the then function');
// process data value here which will contain the value you resolved with
}, function(err)
// process an error in the ajax result here
});

I think this is more of an issue with design of the function then.
Since the xHR call is asynchronous, the postInformation shouldn't really return anything unless it's the Deferred object itself. An alternative option is to have postInformation do some sort of event publishing (dojo/topic), that other functions will subscribe to and know how to handle said events.

Best practices for implementing asynchronous javascript programming with promise Q library

Already had a layer in JS which helps Gets and Posts to the server with the following implementations :
var getJson = function(url, callback, onError) {
$.get(url)
.done(function(data) {
if(callback != null)
callback(data);
})
.fail (function(error) {
if(onError != null)
onError (error);
else
my.notification.notifyError(onErrorMessage);
});
};
var postJSON = function(url, data, callback, onError) {
$.ajax({
url : url ,
type: "POST" ,
contentType : "application/json"
dataType : "json" ,
date : ko.toJSON(data)
})
.done(function(data) {
if(callback ! = null)
callback(data);
})
.fail(function(error) {
if(onError ! = null)
onError (error);
else
my.notification.notifyError(onErrorMessage);
});
};
Using these implementations on DataService layer :
// Get
var find = function(date, onSuccess , onError) {
var url = /* url with the Controller and Action */ + "?queryString = " + data.filter;
getJson(url , onSuccess , onError);
};
// Post
var save = function(date, onSuccess , onError) {
var url = /* url with the Controller and Action */;
postJSON(url, data, onSuccess, onError);
};
However we use webapi, wich in some cases, a request depends the result of another request generating a "Pyramid of Doom ".
For more elegance of code we are implementing the library Q for asynchronous programming.
To follow the pattern shown above using Q promisses was implemented new method of get as show:
var getJsonDefer = function(url, callback, onError) {
return Q.when($.getJSON(url))
.then (function(data) {
if(callback ! = null)
callback(data);
})
.fail (function(error) {
if(onError ! = null)
onError (error);
else
my.notification.notifyError(onErrorMessage);
});
};
I'm trying to use this implementation on DataService layer this way:
// Get
var find = function(date, onSuccess , onError) {
var url = /* url with the Controller and Action */ + "?queryString = " + data.filter;
return getJsonDefer(url, onSuccess, onError);
};
Anyway in my layer viewmodel javascript suppose I need to use 3 finds and one depends on the outcome of the other:
var = dataOne {
filter: " Filter"
};
findOne(dataOne,
function(result) {
return result;
}
function(error) {
throw error;
})
.then(function(args) {
var = datatwo {
filter: args
};
// Second
findTwo(datatwo ,
function(result) {
return result;
}
function(error) {
throw error;
}
);
})
.then(function(args) {
var = dataThree {
filter: args
};
// Third
findThree(dataThree,
function(result) {
return result;
}
function(error) {
throw error;
}
);
}).catch(function(error) {
// Handle any error from all above steps
})
.done();
My problem :
I admit that I am not able to implement the right way, because all my functions inside .then() are coming with undefined args.
I wonder know what is the best practice to meet the scenario propose here.

I think you will find that the appeal of promises is that you can accomplish your goals with much less code that before. There are a few things you’ll need to know about, though. For one, you will not need to pass or receive callbacks and errbacks anymore. You just need to make sure to return results or promises for results in your handlers. That is how the values propagate to the next handler.
This is an untested adaptation of your program that should illustrate the form:
var find = function(data) {
var url = /* url with the Controller and Action */ + "?queryString = " + data.filter;
return Q($.getJson(url));
};
find({filter: "filter"})
.then(function (firstResult) {
return find({filter: firstResult})
.then(function (secondResult) {
return find({filter: secondResult})
.then(function (thirdResult) {
return [firstResult, secondResult, thirdResult];
});
});
})
.fail(notifyError)
.done();
Note that an error in any stage will be handled by the single fail call at the bottom. Regardless of whether you have an error handler at the end, always end a chain with done() so that any errors that happen before, even in your fail handler, show up in your console.
Note that you only need to nest promises if one operation depends on the previous and the handler needs access both the first and second result. If you only need the result of the second operation, you can just chain.
find({filter: "filter"})
.then(function (firstResult) {
return find({filter: firstResult})
})
.then(function (secondResult) {
return find({filter: secondResult})
.then(function (thirdResult) {
return [secondResult, thirdResult];
});
});
.fail(notifyError)
.done();
You can also flatten things with Q.all and promise.spread, but I will leave you to the documentation at this point because, I hope, you get the gist.

Testing nested promises with Jasmine

This is working when I run the UI in the browser, but I'm always getting null for the 'd' in my validateAsync method that needs to call the done method to get it back to the save method. I can't figure out how to use the andCallFake (required to spyOn the unique name test), but also get it to return the (jQuery) deferred to call done on.
Hopefully this code will give you enough context to see what I'm trying to accomplish.
validateAsync = function () {
var d,
isValid = true,
isUnique = false;
// validate that name and description are given
if (layout.Name() === '') {
toastr.warning('Layout name is required', 'Layout');
isValid = false;
}
// validate that there are no other layouts of the same type with the same name
d = uiDataService.GetIsLayoutNameUniqueAsync(layout.LayoutId(), layout.Name(), layout.LayoutTypeId())
.done(function (isUniqueResult) {
isUnique = isUniqueResult.toLowerCase() === "true";
if (!isUnique) {
toastr.warning('Layout name ' + layout.Name() + ' must be unique. There is already a layout with this name.', 'Layout');
}
// this is always undefined in my Jasmine tests
d.done(isValid && isUnique);
})
.fail(function (response) {
mstar.AjaxService.CommonFailHandling(response.responseText);
});
return d;
},
save = function () {
validateAsync()
.done(function (isValidResult) {
var isValid = isValidResult.toLowerCase() === "true";
if (!isValid) {
return;
}
// show a toastr notification on fail or success
dataContext.SaveChanges(layout, uiDataService)
.done(function (layoutIdFromSave) {
toastr.success('The layout was saved. Refreshing...');
})
.fail(function () {
toastr.error('There was an error saving the layout.');
})
.always(function () {
// toastr.info('finished');
});
})
.fail(function () {
throw new Error('There was an error validating before save');
});
};
// in uiDataService
getIsLayoutNameUniqueAsync = function (layoutId, layoutName, layoutTypeId) {
return ajaxService.AjaxGetJsonAsync(webServiceUrl + "GetIsLayoutNameUnique?layoutId=" + layoutId + "&layoutName=" + escape(layoutName) + "&layoutTypeId=" + layoutTypeId);
},
// in ajaxService
ajaxGetJsonAsync = function (url, cache) {
return $.ajax({
type: "GET",
url: url,
dataType: "json",
accepts: {
json: "application/json"
},
cache: cache === undefined ? false : cache
});
},
// in a beforeEach
var getIsLayoutNameUniquePromiseSpy = spyOn(mstar.dataService.UiDataService, "GetIsLayoutNameUniqueAsync")
.andCallFake(function () {
spyObj.called = true;
// http://stackoverflow.com/questions/13148356/how-to-properly-unit-test-jquerys-ajax-promises-using-jasmine-and-or-sinon
var d = $.Deferred();
d.resolve('true');
return d.promise();
});
// and a test
it("should show a toastr", function () {
// Act
vm.GetLayout().Name('Test');
vm.GetLayout().Description('Test');
vm.Save();
// Assert
expect(toastr.success).toHaveBeenCalledWith('The layout was saved. Refreshing...');
});

Aligned, I don't know a lot about Jasmine but taking the code on its own merits, it's a lot easier to see what's going on if it's stripped right down to the bare bones.
Greatly simplified, validateAsync() is currently structured as follows :
validateAsync = function () {
...
var d = fn_that_returns_a_promise().done(function() {
...
d.done(boolean);
}).fail(function() {
...
});
return d;
};
which can't be right, because .done() doesn't accept a boolean argument and, whereas I can't say it's definitely wrong, d.done() is not really appropriate inside a d.done() handler (though maybe in different circumstances).
I suggest you want to employ .then() to filter the success case (thus passing on a new promise resolved with your boolean value), while retaining .fail() for the failure case; giving a structure as follows :
validateAsync = function () {
...
return uiDataService.GetIsLayoutNameUniqueAsync(...).then(function(...) {
...
return isValid && isUnique;
}).fail(function(...) {
...
});
};
Thus, save() can be as follows :
save = function() {
validateAsync().done(function(isValid) {
//validation success
if(!isValid) return;
...
}.fail(function() {
//validation failure
...
});
};
Now all you have to do is "join up the dots" (ie. reinsert your own statements etc) and hope I haven't made any mistakes.