循環中的同步ajax後

Question

我有2個不同的ajax後處理方法，都運行在一個循環（每一個在下一個開始之前完成），在我使用async之前：假和一切正常，但現在是折舊並拋出錯誤。有沒有其他方法，以便我可以同時運行方法，同時仍然在我的循環？我已經嘗試在自己的函數中包裝每個函數，並使用.done（）來調用，但是這會讓我的帖子保留在循環中。

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); 
     } 
    }) 
} 
} 

Answer 1

構建基於將數組傳遞給您的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