javascript - ajax 错误回调中的重新抛出错误正在创建 Uncaught Error

Question

Error Image如何将 ajax 请求期间收到的错误消息冒泡到调用者？我在开发者工具的控制台中的抛出新错误(“某些错误”)处收到 Uncaught Error 。

我尝试了如下的简单示例，该示例会出现错误:

$("#myBtnAjax").click(function() {
  try {
    //Test();
    getMonthName("test");
  } catch (err) {
    alert("error " + err);
  }
});
function getMonthName(mo) {
  // Adjust month number for array index (1 = Jan, 12 = Dec)
  // var months = ['Jan', 'Feb','Mar','Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep','Oct', 'Nov', 'Dec'];
  mo = mo - 1;
  if (months[mo]) {
    return months[mo];
  } else {
    throw "InvalidMonthNo"; //throw keyword is used here
  }
}

$(document).ready(function() {
  $("#myBtnAjax").click(function() {
    try {
      Test();
    } catch (err) {
      alert("error " + err.message);
    }
  });

  function Test() {
    /**
     * http://api.jquery.com/jQuery.ajax/
     */
    $.ajax({
      url: "/non-existent-path-adsasd",

      type: "GET",

      dataType: "json",

      data: {
        name: "John",
        location: "Boston"
      },

      /**
       * A function to be called if the request fails.
       */
      error: function(jqXHR, textStatus, errorThrown) {
        alert(
          "An error occurred... Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information!"
        );

        $("#result").html(
          "<p>status code: " +
            jqXHR.status +
            "</p><p>errorThrown: " +
            errorThrown +
            "</p><p>jqXHR.responseText:</p><div>" +
            jqXHR.responseText +
            "</div>"
        );
        console.log("jqXHR:");
        console.log(jqXHR);
        console.log("textStatus:");
        console.log(textStatus);
        console.log("errorThrown:");
        console.log(errorThrown);

        throw new Error("some error");
      },

      /**
       * A function to be called if the request succeeds.
       */
      success: function(data, textStatus, jqXHR) {
        $("#result").html(data);
        alert(
          "Load was performed. Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information! "
        );
        console.log("jqXHR:");
        console.log(jqXHR);
        console.log("textStatus:");
        console.log(textStatus);
        console.log("data:");
        console.log(data);
      }
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>AJAX error handling with jQuery</h1>

<div>
    <button id="myBtnAjax">AJAX communication with error</button>
</div>

<div id="result">
</div>

Answer 1

尝试返回一个新的 Promise。 ajax 调用是异步的，因此抛出异常时 catch block 已经被传递。

$('#myBtnAjax').click(function() {
  Test()
    .then((data) => {
     //do something with response
    })
    .catch((err) => {
      alert(err); //handle error here
    });

});

function Test()
{
  return new Promise((resolve, reject) => {
    $.ajax({
      url: '/non-existent-path-adsasd',

      type: "GET",

      dataType: "json",

      data: {
        name: "John",
        location: "Boston"
      },

      /**
       * A function to be called if the request fails.
       */
      error: function(jqXHR, textStatus, errorThrown) {
        alert('An error occurred... Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information!');

        $('#result').html('<p>status code: '+jqXHR.status+'</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>'+jqXHR.responseText + '</div>');
        console.log('jqXHR:');
        console.log(jqXHR);
        console.log('textStatus:');
        console.log(textStatus);
        console.log('errorThrown:');
        console.log(errorThrown);

        reject('Some Error');
      },

      /**
       * A function to be called if the request succeeds.
       */
      success: function(data, textStatus, jqXHR) {
        $('#result').html(data);
        alert('Load was performed. Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information! ');
        console.log('jqXHR:');
        console.log(jqXHR);
        console.log('textStatus:');
        console.log(textStatus);
        console.log('data:');
        console.log(data);
        resolve(data);
      }
    });
  });
  /**
   * http://api.jquery.com/jQuery.ajax/
   */

}