Handling ajax synchronous?

Question

I have a example fetch data through ajax and do something. Condition is this function can reuseable. Can call anywhere.

<script type="text/javascript">

    function getData(value1,value2){

        $.ajax({
            url: URL,
            data:{
                email:value1,
                age:value2
            },
            async:false,
            dataType: "json",
            type: "get",
            success: function(data){

                var result;

                result = data.result;

                console.log("result:"+result);
            },
            error: function(){
            }
        });
    };

    var data;

    data = getData("email","age");

    console.log("data:"+data);
</script>

When i call ajax, result return later so data empty.I try use async false but just ok inside ajax.

How to do do javascript wait for the response and not execute any more, get the response and then continue executing. Set timeout is not good idea because it causing problems about server response speed on different servers and server to different client.

*Syncrhonous XMLHttpRequest is deprecated on the main thread because of its detrimental effects to the end user's experience* - rather than run away from asynchronous code, learn to use it. Note: in your code, `getData` doesn't return anything, which is why `data` is undefined — Jaromanda X, Aug 02 '17 at 04:09
move `var result;` to the top of `getData` ... at the bottom of `getData` add `return result;` — Jaromanda X, Aug 02 '17 at 04:11
If you want an answer that includes **asynchronous** request - see https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call - it does appear like you originally tried asynchronous request and resorted to synchronous because you couldn't get asynchronous to work — Jaromanda X, Aug 02 '17 at 04:13

Vivek Doshi · Answer 1 · 2017-10-05T08:17:40.977

You can try this :

function getData() {
    $.ajax({
        url: URL,
        ...
        ...
        type: 'GET',
        success : resultData
    })
}

var resultData = function (data) {
    console.log(data);
    // This will be called whenever the data is available
    // So you execute what ever you want to, once data is available
    // initiate function that is dependent on that data ....
}

getData();

Note : never use async: false , because it will make all the next code to wait to execute and its never a good idea to make ajax async: false , try the callback function method. It will give you same result , without making ajax async: false, and its alot better way to do it.

Abbas Hasani · Accepted Answer · 2017-08-02T04:16:38.693

1

you can use callback in ajax

for example :

    function getData(value1,value2, callback){

        $.ajax({
            url: URL,
            data:{
                email:value1,
                age:value2
            },
            dataType: "json",
            type: "get",
            success: function(data){

                var result;

                result = data.result;
    callback(result)
                console.log("result:"+result);
            },
            error: function(){
            }
        });
    };

    var data;

    data = getData("email","age", function(result){
    console.log("data:"+data);
});

edited Aug 02 '17 at 04:16

answered Aug 02 '17 at 04:09

Abbas Hasani

194
4

in that case, why use synchronous request? – Jaromanda X Aug 02 '17 at 04:10
Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called. If you set async: true then that statement will begin it's execution and the next statement will be called regardless of whether the async statement has completed yet. – Abbas Hasani Aug 02 '17 at 04:19
I understand how asynch works, just, with a callback, you may as well go the whole asynch route. P.S. `data` will **still** be undefined in your code – Jaromanda X Aug 02 '17 at 04:21

Handling ajax synchronous?

2 Answers2