synchronous ajax post in a loop

Question

I have 2 different ajax post methods that both run on a loop (with each one finishing before the next one starts), before I was using async: false and everything worked fine, but it is now depreciated and throws errors. Is there an alternative method so that I can run the methods synchronously while still in my loop? I have tried wrapping each in their own function and calling using .done() but this keeps my post in the loop.

function postLoop() {
len = 3
backorderPayLoad = []
cancelPayLoad = []

for (var i = 0; i < len; i++) {
    backorder = {
        "quantity": 20,
        "note": "Backorder",
    }

    cancel = {
        "quantity": 20,
        "note": "Cancel",
    }

    backorderPayLoad.push(backorder);
    cancelPayLoad.push(cancel);


    $.ajax({
        url: myurl,
        method: 'POST',
        contentType: : "application/json",
        async: false,
        data: JSON.stringify(backorderPayLoad[i]),
        beforeSend: function(xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    })

    $.ajax({
            url: myurl2,
            method: 'POST',
            contentType: : "application/json",
            async: false,
            data: JSON.stringify(cancelPayLoad[i]),
            beforeSend: function(xhr, settings)
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    })
}
}

AJAX stands for **Asynchronous** JavaScript And XML, so why should there be an alternative? — Alon Eitan, Jul 10 '17 at 16:23
async: false is now depreciated. I need each post to finish before the next one starts — user2168066, Jul 10 '17 at 16:23
Not clear what relationship is between the requests or what you do with their responses — charlietfl, Jul 10 '17 at 16:23
I'm using this to post a data set to an API endpoint, or 2 end points in this case. — user2168066, Jul 10 '17 at 16:25
Put the second ajax call inside the `success` method of the first ajax call. — nurdyguy, Jul 10 '17 at 16:25
This is somewhat related: [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Alon Eitan, Jul 10 '17 at 16:25
Is the 2nd ajax request in the loop dependent on the 1st? Or do you really need all the requests to be executed one after another? — Barbara Laird, Jul 10 '17 at 16:26
I reread your description... Do you need both of the calls to happen before the loop iterates? If so you'll need to run a recursive loop instead. — nurdyguy, Jul 10 '17 at 16:27
the 2 calls need to happen after the previous one completes, when it loops the first method needs to wait til the second finishes, and vice versa. — user2168066, Jul 10 '17 at 16:28
Here is a simple example of a recursive request: https://stackoverflow.com/questions/18310338/recursive-ajax-requests — nurdyguy, Jul 10 '17 at 16:37

charlietfl · Answer 1 · 2017-07-10T18:21:28.667

Example that builds a recursive promise chain based on passing an array to your postloop().

 let orders =[{..},{...},{...}];
 // initiialize
 postloop(orders).then(finalData => {
   // do something with final data after all requests completed
   console.log('Final', finalData);
 }).catch(err=>{ // use `fail()` if jQuery version < 3
    console.log('oops something wrong in at least one request');
 });

 function postloop(orders) {
   let finalData = [],
     orderIndex = 0;

   function completeRequests(res) {
     // push results of each set of requests to array
     finalData.push(res);
     orderIndex++;
     if (orderIndex < orders.length) {
       //  return another set of request promises to add to chain 
       return doRequests(orders[orderIndex]).then(completeRequests)
     } else {
       // and finally return array of data to resolve all promises
       return finalData;
     }

   }
   // return promise chain
   return doRequests(orders[orderIndex]).then(completeRequests);

 }

 // function will be called recursively in postloop() always returning promise
 function doRequests(order) {
   let backorder = $.extend({}, order);
   backorder.note = "Backorder";

   // return request promises
   return firstRequest().then(secondRequest)


   function firstRequest() {
     return $.ajax({
       url: '/echo/json/',
       method: 'POST',
       data: {
         json: JSON.stringify(backorder)
       }
     }).then(backorderResponse => {
       console.log('First request complete for id: ', backorder.id)
       return backorderResponse;
     });
   }

   function secondRequest(backorderResponse) {
     let cancel = {
       id: backorderResponse.id, // do something with data from first response,
       qty: backorderResponse.qty,
       note: 'Cancel'
     };

     return $.ajax({
       url: '/echo/json/',
       method: 'POST',
       data: {
         json: JSON.stringify(cancel)
       }
     }).then(cancelOrderResponse => {
       // do something with each of the 2 responses
       let combinedData = {
         cancel: cancelOrderResponse,
         backorder: backorderResponse
       };
       console.log('Second request complete for id: ', cancel.id)
       return combinedData;
     });
   }
 }

DEMO

synchronous ajax post in a loop

1 Answers1