XMLHttpRequestは、応答にエラーステータスがある場合でも、常に「load」イベントリスナーを呼び出しています。

Question

FormDataを使用してファイルをアップロードしています。アップロードは機能しますが、問題は "エラー"コールバックが呼び出されないことです。私のHTTPレスポンスが500の内部サーバエラー（私が500で応答するようにサーバを調整することをテストする）であっても、 "load"コールバックが呼び出されます。

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

Chromeでこれをテストしています。

Answer 1

このセットアップは、あなたのニーズに合わせてより良い動作するはず：

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

それが唯一のネットワーク・レベルのエラーによってトリガーされるので、あなたのコードのエラーコールバックが呼び出されないで、それはHTTP戻りコードを無視します。

Answer 2

loadイベントは、サーバーがメッセージで応答するたびに呼び出されます。応答のセマンティクスは重要ではありません。重要なことは、サーバーが応答したことです（この場合は500のステータス）。イベントにエラーセマンティクスを適用する場合は、自分でステータスを処理する必要があります。サンプルコード によって

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、ネットワークエラーが応答を持っていない、それはエラーイベントをトリガすることは明らかです。 レスポンストリガーロードイベント レスポンスステータスの処理方法を決定する必要があります