ループ内での同期ajaxポスト

Question

私はasync：falseを使用していて、すべて正常に機能する前に、ループ上で次々と実行される2つの異なるajaxポストメソッドを持っています償却され、エラーがスローされます。私のループの中に同期してメソッドを実行できるように、代替メソッドがありますか？私は自分の関数でそれぞれをラップし、.done（）を使って呼び出すことを試みましたが、これはループ内に自分の投稿を保持します。あなたのpostloop()に配列を渡すに基づいて再帰的約束チェーンを構築

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

例。

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