Http-статус не срабатывает при попытке поймать JavaScript

Question

У меня есть функция для отправки JSON в конечную точку API, которая работает нормально.Это мой код.

function sendValuesPageLoad(){
     var xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function () {
        try {
          if (xhr.readyState === 4 && xhr.status === 200) {}
        } catch (ex) {
            alert('Error parsing response.');
        }
     }
     try {
        xhr.open("POST", "test.html?"+encodedString, true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send();
     } catch (ex) {
        xhr.open("POST", "error.html?"+encodedString, true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send();
     }
} 

Я пытаюсь выполнить дальнейшие действия, если xhr.status не равен 200.

Но улов не срабатывает.

Может кто-нибудь помочь с этим?

Заранее спасибо.

Answer 1

XMLHttpRequest поставляется с собственным обработчиком ошибок onerror. Обновление вашего примера

function sendValuesPageLoad(){
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
       if (xhr.status === 200) {
          // successful
       } else {
          // fails
          throw new Error('Failed with status: ' + xhr.statusText);
       }
    }
    xhr.onerror = function () {
       throw new Error('There is a problem');
    }
    xhr.open("POST", "test.html?"+encodedString, true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send();
}

Вы можете улучшить это, поместив его в Promise и поймав любую ошибку

function sendValuesPageLoad(){
  return new Promise(function(resolve, reject) { 
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
       if (xhr.status === 200) {
          // successful
          resolve(xhr.response);
       } else {
          // fails
          reject(xhr.statusText);
       }
    }
    xhr.onerror = function () {
       reject(Error("Network Error"));
    }
    xhr.open("POST", "test.html?"+encodedString, true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send();
  }
}

// use case
sendValuesPageLoad().then(function(response) { 
   // use your response here
}).catch(function(error) {
   // handle your error
});

Answer 2

function sendValuesPageLoad(){
   var encodedString = "value=2";

   var xhr = new XMLHttpRequest();
   console.log('UNSENT: ', xhr.status);

   xhr.open("POST", "test.html?" + encodedString, true);
   console.log('OPENED: ', xhr.status);
   
   xhr.onprogress = function () {
     console.log('LOADING: ', xhr.status);
   };
   
   xhr.setRequestHeader("Content-Type", "application/json");
   
   xhr.onload = function () {
     console.log('DONE: ', xhr.status);
     
     if(xhr.status === 200){
        alert("Status code is 200");
        
     }else{
         alert("Status code is not 200, but " + xhr.status);
     
        xhr.open("POST", "error.html?"+encodedString, true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send();
     }
   };
   
   xhr.send();  
}

sendValuesPageLoad();