0

I have a jQuery ajax call that I want to do some task in order after the result comes. 

$.ajax({
    url : 'https://api.spacexdata.com/v3/launches',
    type : 'GET',
    dataType:'json',
    success : function(data) {  
       data.forEach(async function(element) {
          await console.log(element.flight_number);
          await auto(element.flight_number);
       });
    },
    error : function(request,error) {
        console.log(request,error);
    }
});

function auto(val) {
  $.ajax({
    url : 'https://api.spacexdata.com/v3/launches/latest',
    type : 'GET',
    dataType:'json',
    success : async function(data) {                     
      await console.log('second api called' , data);
    },
    error : function(request,error) {
        console.log(request,error);
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

the out put is :

 1
 2
 3
 4
 ...
 second api called Obj
 second api called Obj
 second api called Obj
 second api called Obj
 ...

but the expected result is :

1
the second api called 
2
the second api called 
3
the second api called   
4
the second api called 

....

here is the jsfiddle:

Do you have any idea what is wrong with the loop? I want the sequence I mentioned!

Stphane
  • 3,368
  • 5
  • 32
  • 47
Afsanefda
  • 3,069
  • 6
  • 36
  • 76
  • There's nothing wrong with your loop, the outcome you get is correct given your logic. The `await` command relinquishes control to the next operation (in your case the next iteration of the loop) until the command being awaited completes. As these are AJAX requests they will take much longer than the 5-10 ms than a `for` loop does. – Rory McCrossan Oct 16 '19 at 15:47
  • could you please tell me how ? – Afsanefda Oct 16 '19 at 15:48
  • Also note that making AJAX requests in a loop isn't a great idea, although I can see your hands may be tied in this regard by the API. Also note that each looped AJAX request is identical and therefore redundant as you don't send any data in them; the `val` argument is never used – Rory McCrossan Oct 16 '19 at 15:48
  • you can pass context into your ajax call which will then become ```this``` inside the result handler, this way you can safely link requests to the responses. this doesn't exactly solve your issue, but what you ask for would really require synchronous processing, which isn't great. see here for more details: https://stackoverflow.com/questions/5097191/ajax-context-option – user1514042 Oct 16 '19 at 15:57
  • By the way, shouldn't `auto` function be _async_ and return a Promise object so it can really be awaited? – Stphane Oct 16 '19 at 16:54

1 Answers1

1

Can you try this code

$.ajax({
  url : 'https://api.spacexdata.com/v3/launches',
  type : 'GET',
  dataType:'json',
  success : function(data) {  
    data.forEach(function(element) {
      console.log(element.flight_number);
       auto(element.flight_number);
    });
  },
  error : function(request,error) {
    console.log(request,error);
  }
});
    
async function auto(val) {

  const dataset= $.ajax('https://api.spacexdata.com/v3/launches/latest');
 console.log('second api called');
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Jinesh
  • 1,554
  • 10
  • 15