XMLHttpRequest는 응답에 오류 상태가 있는 경우에도 항상 "load" 이벤트 수신기를 호출합니다.

XMLHttpRequest는 응답에 오류 상태가 있는 경우에도 항상 "load" 이벤트 수신기를 호출합니다.

저는 FormData를 사용하여 파일 업로드를 아약스하고 있습니다.업로드는 작동하지만 문제는 "오류" 콜백이 호출되지 않는다는 것입니다.내 HTTP 응답이 500 내부 서버 오류인 경우에도(이 I weak server가 500으로 응답하도록 테스트하기 위해) "load" callback이 호출됩니다.

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

무슨 생각 있어요?크롬에서 테스트하고 있습니다.

이 설정은 사용자의 요구에 더 적합하게 작동해야 합니다.

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 반환 코드를 무시하기 때문에 결코 호출되지 않습니다.

서버가 메시지로 응답할 때마다 로드 이벤트가 호출됩니다.응답의 의미론은 중요하지 않습니다. 중요한 것은 서버가 응답했다는 것입니다(이 경우 500개 상태).오류 의미를 이벤트에 적용하려면 상태를 직접 처리해야 합니다.

@richremer의 답변을 확대하여 직접 상태에 액세스할 수 있는 방법을 소개합니다.

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

    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", function(e) {
        if(e.currentTarget.status < 400)
            alert("Load callback - success!");
        else
            alert("Load callback - error!");
    }, false);
    xhr.addEventListener("error", function(e) {
        alert("Error callback");
    }, false);
    xhr.open("POST", "/upload_image");
    xhr.send(formData);
}

에 액세스할 수 있습니다.e.currentTarget.status응답 이벤트의 속성(e). 상태는 실제로 다음 중 하나를 통해 확인할 수 있습니다.e.{currentTarget,target,srcElement}.status- 하지만 어떤 것이 최선의 방법으로 사용되어야 하는지 잘 모르겠습니다.

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

예제 코드에 의해 EJS에서 코드가 전송됩니다. 네트워크 오류가 응답이 없음이 분명합니다. 오류 이벤트를 트리거합니다.응답 트리거 로드 이벤트 및 응답 상태로 수행할 작업을 결정해야 합니다.

언급URL : https://stackoverflow.com/questions/6783053/xmlhttprequest-is-always-calling-load-event-listener-even-when-response-has-e