jQuery метод .catch()

Определение и применение

jQuery метод .catch() добавляет обработчик или обработчики, которые будут вызваны при изменении состояния объекта Deferred на rejected (выполнение отклонено).

jQuery синтаксис:

Синтаксис 3.0:

deferred.catch( failFilter )

failFilter - Function

Добавлен в версии jQuery

Значения параметров

Пример использования

<!DOCTYPE html>
<html>
  <head>
    <title>Использование jQuery метода .then()</title>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".test").click(function () {
          // задаем функцию при нажатиии на элемент с классом .comments
          $.get("https://jsonplaceholder.typicode.com/notexist") // пытаемся загрузить данные с сервера с помощью HTTP запроса методом GET
            .then(function () {
              // добавляем обработчик при удачном выполнении запроса
              console.log("выполнение успешно"); // выводим в консоль текстовую информацию
            })
            .catch(function () {
              // добавляем обработчик при отклонении  запроса
              console.log("выполнение отклонено"); // выводим в консоль текстовую информацию
            })
            .then(
              function () {
                // добавляем обработчик при удачном выполнении запроса
                console.log("ну и ладно"); // выводим в консоль текстовую информацию
              },
              function () {
                // добавляем обработчик при отклонении  запроса
                console.log("не может быть!"); // выводим в консоль текстовую информацию
              },
            );
        });
      });
    </script>
  </head>
  <body>
    <button class="test">Клик</button>
  </body>
</html>

В этом примере с использованием jQuery функции $.get() мы при нажатии на элемент <button> (кнопка) пытаемся загрузить данные с сервера с помощью HTTP запроса методом GET. В случае успешной загрузки данных (состояние объекта Deferred изменится на resolved) будет вызван первый и второй метод .then().

В нашем примере мы отправляем GET запрос на несуществующий адрес, что приводит к тому, что состояние объекта Deferred изменяется на rejected (выполнение отклонено). В результате чего, первый метод .then() будет проигнорирован, так как он не имеет фильтра для случая, когда состояние объекта объекта Deferred изменяется на rejected (выполнение отклонено), в связи с этим далее по цепочке будет вызван метод .catch(), который выводит текстовую информацию в консоль.

Обратите внимание, что последний метод .then() имеет фильтры как для успешного запроса, так и для случая, когда этот запрос будет отменен. В нашем случае будет всегда вызываться обработчик, предназначенный для удачного выполнения запроса, так как до него мы вызываем метод .catch(), который обрабатывает неудачное выполнение запроса.

Результат примера: