AJAXが失敗したときにJQuery AJAXの約束はいつも壊れています

Question

私は複数のajax要求を持つループを持っています。 各Ajaxは常にコールバックによって管理されます。 各ajaxがpromises配列にプッシュされます。最後に$ .whenが常に使用されます。

$.ajaxが成功した場合は、$.ajaxが成功すると$.when.apply($, promises).always(...); が呼び出されます。

しかし、たとえばが2番目に失敗した場合、$.when.apply($, promises).always(...);は2番目の後にのみ起動され、すべてが3 $.ajaxコールが成功した場合は起動されません。

助けが必要ですか？ @ケビン-Bとコード

$(".upload_all").bind("click", function() { 
    var confirmed_count = 0; 
    var error_count = 0; 
    var promises = []; 

    to_uploads.each(function(index,val) { 
    var elem = $(this); 
    var promise = $.ajax({ 
     url: "/upload/storeUploadedFile", 
     type: 'POST', 
    }).always(function(data_or_jqXHR, textStatus, jqXHR_or_errorThrown) { 
     if (textStatus === "success") { 
     // .. 
     } else { 
     // .. 
     }     
    }); 

    promises.push(promise); 
    }); 

    $.when.apply($, promises) 
    .always(function() { 
     console.log("Promises Always! ") // do other stuff 
    }); 
} 

Answer 1

後 は、それに渡された約束のいずれかが拒否された場合$.when戻ります（ほとんどPromise.allと同じ）が拒否されるという約束を言及しています。おそらくこれは、成功していない場合のアップロードをユーザーに知らせることです。

ただし、$.ajax(..).always（promise.finallyと同じ）は、「この約束が拒否または解決されたときにこのコールバックを実行する」ことを意味します。あなたはおそらく、すべてのAJAX呼び出しが成功したときに何かをするか、いずれかが失敗したときに何かをしたいと思うでしょう。それにはPromise.all(promises).then(...).catch(...)を使用してください。

$(".upload_all").bind("click", function() { 
    var confirmed_count = 0; 
    var error_count = 0; 

    var promises = to_uploads.map(function(index,val) { // using map instead of each here saves us a couple of steps 
    var elem = $(this); 

    return $.ajax({ 
     url: "/upload/storeUploadedFile", 
     type: 'POST', 
    }) 
     .then(function() { confirmed_count += 1; }) 
     .catch(function() { 
     error_count += 1; 
     return Promise.reject(); // Return a rejected promise to avoid resolving the parent promise 
     }); 
    }); 

    // You can use the native API here which does not require doing the `apply` hack 
    Promise.all(promises) 
    .then(function() { alert('All uploads successful'); }) 
    .catch(function() { alert(`Successful uploads: ${confirmed_count}. Failed uploads: ${error_count}`); } 
} 

jQueryの約束の代替実装を使用しますが、彼らはまだネイティブAPIへの対応を忘れないでください：

• .then（jQueryの味で.done）：成功
• 上で実行されるコールバックを添付する.catch（JQueryのフレーバーで.fail）：エラー時に実行されるコールバックをアタッチします。拒否された約束が返されない限り、これは約束を解決するでしょう。
• .finally（JQueryのフレーバーでは.always）：約束が拒否または解決されたにもかかわらず、他のコールバックの実行後に実行されるコールバックを添付します。