XMLHttpRequest siempre llama a "load" event listener, incluso cuando la respuesta tiene un estado de error

Question

Estoy usando FormData para ajax cargar un archivo. La carga funciona, pero el problema es que la devolución de llamada de "error" nunca se invoca. Incluso cuando mi respuesta HTTP es un error del servidor interno de 500 (para probar esto, modifico el servidor para que responda con 500), se invoca la devolución de llamada de "carga".

function upload_image() { 
    var form = document.getElementById('upload_image_form'); 
    var formData = new FormData(form); 

    var xhr = new XMLHttpRequest(); 
    xhr.addEventListener("load", function(e) { 
     alert("Success callback"); 
    }, false); 
    xhr.addEventListener("error", function(e) { 
     alert("Error callback"); 
    }, false); 
    xhr.open("POST", "/upload_image"); 
    xhr.send(formData); 
} 

¿Alguna idea? Estoy probando esto en Chrome.

Answer 1

Esta configuración debería funcionar mejor para sus necesidades:

var req = new XMLHttpRequest(); 
req.open('POST', '/upload_image'); 
req.onreadystatechange = function (aEvt) { 
    if (req.readyState == 4) { 
    if(req.status == 200) 
     alert(req.responseText); 
    else 
     alert("Error loading page\n"); 
    } 
}; 
req.send(formData); 

En su respuesta de error de código que nunca se llama, ya que sólo es provocada por errores a nivel de red, no tiene en cuenta los códigos de retorno HTTP.

Answer 2

El evento de carga se invoca cada vez que el servidor responde con un mensaje. La semántica de la respuesta no importa; lo importante es que el servidor respondió (en este caso con un estado 500). Si desea aplicar la semántica de error al evento, debe procesar el estado usted mismo.

Answer 3

function get(url) { 
return new Promise(function(succeed, fail) { 
    var req = new XMLHttpRequest(); 
    req.open("GET", url, true); 
    req.addEventListener("load", function() { 
    if (req.status < 400) 
     succeed(req.responseText); 
    else 
     fail(new Error("Request failed: " + req.statusText)); 
    }); 
    req.addEventListener("error", function() { 
    fail(new Error("Network error")); 
    }); 
    req.send(null); 
}); 
} 

code from EJS por el código de ejemplo está claro que error de red no tiene ninguna respuesta, se desencadenan eventos de error. evento de carga de activación de respuesta y usted tiene que decidir qué hacer con el estado de respuesta