Javascript async loop with ajax call

Question

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!

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
– Rory McCrossan, Commented Oct 16, 2019 at 15:47
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
– Rory McCrossan, Commented Oct 16, 2019 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: stackoverflow.com/questions/5097191/ajax-context-option — user1514042
– user1514042, Commented Oct 16, 2019 at 15:57
By the way, shouldn't auto function be async and return a Promise object so it can really be awaited? — Stphane
– Stphane, Commented Oct 16, 2019 at 16:54

Jinesh · Accepted Answer · 2019-10-16 16:19:24Z

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>

answered Oct 16, 2019 at 16:19

Jinesh

1,58010 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Afsanefda Over a year ago

I want to have the second api call data on success! const dataset= $.ajax('api.spacexdata.com/v3/launches/latest');

Afsanefda Over a year ago

const dataset= $.ajax('api.spacexdata.com/v3/launches/latest').then(console.log) I need this

Jinesh Over a year ago

you want to use response this url api.spacexdata.com/v3/launches/latest am I right?

Afsanefda Over a year ago

Yes the second i want do some calculation on the second data

Collectives™ on Stack Overflow

Javascript async loop with ajax call

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related