Possible Duplicate:
How can I get jQuery to perform a synchronous, rather than asynchronous, AJAX request?
I have a method that returns initialization data. It first checks the sessionStorage. If it doesn't find the data there, it makes a call to the server to get the data. Here's the code:
function getInitializationData() {
// Check local storage (cache) prior to making a server call.
// Assume HTML 5 browser because this is an Intranet application.
if (!sessionStorage.getItem("initialData")) {
// The browser doesn't have the initialization data,
// so the client will call the server to get the data.
// Note: the initialization data is complex but
// HTML 5 storage only stores strings. Thus, the
// code has to convert into a string prior to storage.
$.ajax({
url: "../initialization.x",
type: "POST",
dataType: "json",
timeout: 10000,
error: handleError,
success: function(data) { sessionStorage.setItem("initialData", JSON.stringify(data)); }
});
}
// convert the string back to a complex object
return JSON.parse(sessionStorage.getItem("initialData"));
}
The problem is that the success function almost always gets executed after the method returns. How can I make the server call synchronous such that the success function must execute prior to the return statement of the getInitializationData method?
Async/Await is a new syntax for writing asynchronous code in JavaScript to make asynchronous code behave in a synchronous way. The word async is used before a function that means a function always returns a promise.
JavaScript is Synchronous Spoiler: at its base, JavaScript is a synchronous, blocking, single-threaded language. That just means that only one operation can be in progress at a time.
If XMLHttpRequest is also fine, then you can use async: false, which will do a synchronous call. Show activity on this post. If you don't want to use the fetch api you will have to use callbacks, event listeners, XMLHttpRequest. As it's currently written, your answer is unclear.
JavaScript provides three methods of handling asynchronous code: callbacks, which allow you to provide functions to call once the asynchronous method has finished running; promises, which allow you to chain methods together; and async/await keywords, which are just some syntactic sugar over promises.
Use async: false
function getInitializationData() {
// Check local storage (cache) prior to making a server call.
// Assume HTML 5 browser because this is an Intranet application.
if (!sessionStorage.getItem("initialData")) {
// The browser doesn't have the initialization data,
// so the client will call the server to get the data.
// Note: the initialization data is complex but
// HTML 5 storage only stores strings. Thus, the
// code has to convert into a string prior to storage.
$.ajax({
url: "../initialization.x",
type: "POST",
dataType: "json",
timeout: 10000,
async: false,
error: handleError,
success: function(data) { sessionStorage.setItem("initialData", JSON.stringify(data)); }
});
}
// convert the string back to a complex object
return JSON.parse(sessionStorage.getItem("initialData"));
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With