CODEWITHSUNDEEP
javascriptjqueryasynchronous
Debopam Parua
Debopam Parua

Reputation: 530

Make two ajax requests run asynchronously

I am trying to make two ajax requests run asynchronously one after the other. The first request pulls the value of a user code, which is to be displayed in a div and then sent in the next ajax request to pull certain details about the user. I tried something like this:

var uid = "";
var token = "";

$.ajax({
    async: true,
    type: "POST",
    url: "http://www.example.com/apis/login.php",
    data: JSON.stringify(inputs),
    dataType: "json",
    success: function(data) {
        if(data.status == "success") {
            uid = data.uid;
            token = decodeURIComponent(data.token);
        }
        else{
            alert(data.message);
        }
    },
    error: function() {
        alert("could not connect to server");
    }
});

document.getElementById("user-id").innerHTML = uid;

$.ajax({
    async: true,
    type: "GET",
    url: "http://www.example.com/apis/services.php",
    headers: {
        "Auth-Token" : encodeURIComponent(token),
        "U-Id" : uid
    },
    success: function(data) {
        alert("connected to server");
    },
    error: function() {
        alert("could not connect to server");
    }
});

But this does not work as expected, adding "async: true" or not adding "async" at all both have the same effect. The network console shows that the second ajax request is made before acquiring the response of the first request and so the second request fails due to invalid headers, so does the text box update of user id.

I could make it work by adding all the subsequent code after the first ajax call inside the success function of the the first request, but this is very inconvenient as some more apis are to be called after this and this will lead to nested calls which I am not willing to use.

Is there any way of making this code run asynchronously?? Please let me know.

Thanks in advance.

Upvotes: 1

Views: 2291

Answers (2)

Jeremy Thille
Jeremy Thille

Reputation: 26360

A simple way, without promises, is to start the second call after the first one completes, and pass it the token from the first call :

$.ajax({
    url: "http://www.example.com/apis/login.php",
    //...
    success: function (data) {
        uid = data.uid;
        document.getElementById("user-id").innerHTML = uid;
        makeSecondCall(data.token);
    }
});


function makeSecondCall(token) {
    $.ajax({
        //...
        headers: {
            "Auth-Token": token,
            "U-Id": uid
        }
    });
}

Upvotes: 2

Vivek Doshi
Vivek Doshi

Reputation: 58523

All you need to do is to set function which will be called on the success of first ajax request.

var uid = "";
var token = "";

$.ajax({
    type: "POST",
    url: "http://www.example.com/apis/login.php",
    data: JSON.stringify(inputs),
    dataType: "json",
    success: function(data) {
        if(data.status == "success") {
            uid = data.uid;
            token = decodeURIComponent(data.token);
            successCallback();
        }
        else{
            alert(data.message);
        }
    },
    error: function() {
        alert("could not connect to server");
    }
});


function successCallback()
{
    document.getElementById("user-id").innerHTML = uid;
    $.ajax({
        type: "GET",
        url: "http://www.example.com/apis/services.php",
        headers: {
            "Auth-Token" : encodeURIComponent(token),
            "U-Id" : uid
        },
        success: function(data) {
            alert("connected to server");
        },
        error: function() {
            alert("could not connect to server");
        }
    }); 
}

Upvotes: 2

Related Questions