Jquery AJAX Versprechen mit immer Pause, wenn Ajax scheitern

Question

Ich habe eine Schleife mit mehreren Ajax-Anfrage. jeder Ajax wird durch immer Callback verwaltet. jeder Ajax ist in Versprechen Array geschoben. schließlich $ .wenn immer verwendet wird.

Wenn alle $.ajax Erfolg haben, wird die $.when.apply($, promises).always(...); aufgerufen, wenn alle $.ajax Aufrufe erfolgreich sind.

Aber zum Beispiel auf 3 $.ajax Anruf der zweite schlägt fehl, der $.when.apply($, promises).always(...); wird nur nach dem zweiten und nicht wenn alle 3 $.ajax Anrufe erfolgreich sind gefeuert.

Irgendwelche Hilfe? den Code Nach

$(".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

Wie @ kevin-b erwähnt, das Versprechen, dass $.when zurückkehrt (so ziemlich das gleiche wie Promise.all) abgelehnt werden, wenn eine der an sie übergeben Versprechen abgelehnt wird. Sie möchten dies wahrscheinlich, um den Benutzer darüber zu informieren, dass einige Uploads nicht erfolgreich waren.

Aber $.ajax(..).always (das gleiche wie promise.finally) bedeutet "diesen Callback ausführen, wenn dieses Versprechen entweder abgelehnt oder aufgelöst wird". Wahrscheinlich möchten Sie stattdessen etwas tun, wenn alle Ajax-Aufrufe erfolgreich sind, oder etwas anderes tun, wenn einer von ihnen fehlschlägt. Verwenden Sie dazu 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}`); } 
} 

Denken Sie daran, JQuery eine alternative Implementierung von Versprechungen verwendet, aber sie reagieren noch auf die native API:

• .then (.done in JQuery Geschmack): einen Rückruf anhängen auf Erfolg zu führen
• .catch (.fail in JQuery Flavor): Anfügen eines Rückrufs bei Fehler ausgeführt werden. Wenn ein zurückgewiesenes Versprechen nicht zurückgegeben wird, wird das Versprechen gelöst.
• .finally (.always in JQuery Flavor): fügen Sie einen Callback hinzu, der ausgeführt werden soll, nachdem andere Callbacks ausgeführt wurden, obwohl das Versprechen zurückgewiesen oder aufgelöst wurde.