Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make a JavaScript synchronous call to the server? [duplicate]

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?

like image 606
James Avatar asked Jan 08 '13 15:01

James


People also ask

How do you make a synchronous call in JavaScript?

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.

Does JavaScript execute synchronously?

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.

How do I make synchronous fetch?

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.

How does JavaScript handle asynchronous calls?

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.


1 Answers

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"));
}
like image 83
gopi1410 Avatar answered Nov 15 '22 01:11

gopi1410