HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>promise() — catch</title>
</head>
<body>
  <h1>Error on promise</h1>
  <button id="ok">Success</button>
  <button id="bad">Failure</button>
  <pre id="out">Choose a path...</pre>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    function fetchData(fail) {
      var deferred = $.Deferred();
      setTimeout(function () {
        if (fail) {
          deferred.reject("Network error");
        } else {
          deferred.resolve({ data: "OK" });
        }
      }, 350);
      return deferred.promise();
    }

    function run(fail) {
      fetchData(fail).then(function (r) {
        document.getElementById("out").textContent = "Data: " + r.data;
      }).catch(function (err) {
        document.getElementById("out").textContent =
          "Error fetching data: " + err;
      });
    }

    $("#ok").on("click", function () { run(false); });
    $("#bad").on("click", function () { run(true); });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery deferred.promise() — catch errors (Try It)