Use of "async" has been depreciated. Alternative to make synchronous call in ajax/Jquery

Question

I want to return some data after post request and keep in a local variable to use multiple times. I have written below code which returns undefined everytime.

function getSomeList()
{
    var myVariable;
    $.post("/Home/getList", { 'input': inputData })
  .done(function (data) {
      //alert("Data Loaded: " + data); // I can see the data here.
      myVariable = data;
  });
  return myVariable;
}

If call this function then it returns undefined.

  alert(getSomeList());

I also tried with old way by writing async: false and came to know that Use of "async" has been depreciated.

$.ajax({
    'async': false,
    'type': "POST",
    .
    .
    .
});

Please let me know if there is any other solution.

Your function returns `myVariable` right away instead of waiting for the request to finish. This is why it returns undefined. You should take a look at deferreds from jQuery, which are pretty similar to Promises from es6. — , Aug 16 '18 at 18:39
@Taplar As mentioned in comment, I can see the data in done callback. — John, Aug 16 '18 at 18:41
Right, because the logic is asynchronous. To code with asynchronous logic, you have to change how you approach the issue, and use the methods that accommodate that different paradigm. — Taplar, Aug 16 '18 at 18:44

Taplar · Accepted Answer · 2018-08-16T19:32:58.810

3

Use the callbacks that are within the paradigm of asynchronous processing.

function getSomeList(inputData) {
  return $.post("/Home/getList", { 'input': inputData });
}

getSomeList(missingVariable).then(function(data){
  alert(data);
});

If you need to use the value some time later in your application, you can store the promise and use it later.

someSharedVariable = getSomeList(missingVariable);

... other lines of code ...

... future point in time ...
someSharedVariable.then(function(data){
  //use data in your secondary ajax call
});

edited Aug 16 '18 at 19:32

answered Aug 16 '18 at 18:40

Taplar

24,788
4
22
35

I tried this logic but the output is same. I can see the data in alert but can not store in a global variable and reuse it. Still getting "undefined". – John Aug 16 '18 at 18:52
1

Right, you don't want to use a global variable, because the "end" of an asynchronous method is in determinant. If you need a value off the response of an ajax call, you need to use one of the callbacks to get it. You could optionally store the response of the `getSomeList()` in the global variable, and any time you need to use the response, pop another `then()` on it. – Taplar Aug 16 '18 at 18:53
1

Also it should be noted that synchronous requests have only been deprecated in jQuery. javascript still supports them with passing in false on the https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open – Taplar Aug 16 '18 at 18:56
I need to store it because I have to pass the response of this method in another ajax call as a input parameter. I am trying to follow your approach but no luck.If I store the response of the getSomeList() in the global variable use another then() than it returns object not the actual response. – John Aug 16 '18 at 19:28

Use of "async" has been depreciated. Alternative to make synchronous call in ajax/Jquery

1 Answers1