jQuery Academy · Урок

Обработка ошибок и успешных результатов AJAX

«Обработка ошибок и успешных результатов AJAX» — бесплатный урок jQuery Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Обработка асинхронных результатов

Когда Вы отправляете AJAX-запрос, это асинхронная операция. Это означает, что Ваш код не ждёт ответа сервера, а продолжает выполнять другие задачи.

Чтобы обработать ответ сервера (или его отсутствие), jQuery предоставляет специальные методы, называемые функциями обратного вызова. Эти функции выполняются только при наступлении определённых событий, например при успешном выполнении или ошибке.

Когда всё работает правильно

Функция обратного вызова .done() предназначена для обработки успешно выполненных AJAX-запросов. Она выполняется, когда сервер отвечает кодом состояния, указывающим на успех (обычно 200–299).

Она получает данные, возвращённые сервером.
Это идеальное место для обновления интерфейса свежей информацией.

Отображение успешно полученных данных

Давайте получим данные и отобразим их после успешного выполнения запроса. Обратите внимание, как .done() присоединяется цепочкой к вызову $.ajax().

$(document).ready(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    method: "GET"
  })
  .done(function(data) {
    console.log("Success! Data received:");
    console.log(data.title); // Access a property
    $('body').append('<p>Post Title: ' + data.title + '</p>');
  });
});

Когда что-то идёт не так

Но что, если сервер не может выполнить Ваш запрос? В этом случае используется функция обратного вызова .fail(). Она выполняется, когда AJAX-запрос завершается ошибкой, например 404 (Не найдено) или 500 (Ошибка сервера).

Она помогает уведомить пользователя о проблеме или записать сведения о ней в журнал.
Она получает подробную информацию об ошибке.

Реакция на ошибки

Давайте попробуем получить данные по несуществующему URL. Функция обратного вызова .fail() перехватит ошибку и запишет сведения о ней в журнал.

$(document).ready(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/nonexistent", // This URL will fail
    method: "GET"
  })
  .done(function(data) {
    console.log("This won't run on error.");
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Error! Status: " + textStatus);
    console.log("HTTP Error: " + errorThrown);
    $('body').append('<p>Error fetching data!</p>');
    $('body').append('<p>Status: ' + textStatus + '</p>');
  });
});

Разбор параметров ошибки

Функция обратного вызова .fail() предоставляет три полезных параметра, которые помогают понять причину ошибки:

jqXHR: объект jQuery XMLHttpRequest с подробными сведениями низкого уровня.
textStatus: строка с описанием типа ошибки (например, «тайм-аут», «ошибка», «прерывание»).
errorThrown: текст состояния HTTP (например, «Не найдено» для кода 404).

Используйте их, чтобы предоставлять пользователям конкретную информацию.

Выполнение в любом случае

Иногда необходимо выполнить действие независимо от того, завершился AJAX-запрос успешно или с ошибкой. Для этого предназначена функция обратного вызова .always().

Она всегда выполняется после одной из функций .done() или .fail().
Она отлично подходит для завершающих действий, например скрытия индикатора загрузки или повторного включения кнопки.

Выполнение завершающих действий

Давайте добавим .always() в предыдущий пример. Мы смоделируем состояние загрузки и убедимся, что оно будет отключено независимо от успешного или неудачного выполнения запроса.

$(document).ready(function() {
  $('body').append('<p id="status">Loading data...</p>'); // Simulate loading
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1", // Try changing to 'nonexistent' to see fail+always
    method: "GET"
  })
  .done(function(data) {
    console.log("Success! Data: " + data.title);
    $('#status').text('Data loaded successfully!');
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Failed! " + textStatus);
    $('#status').text('Failed to load data!');
  })
  .always(function() {
    console.log("Request finished (success or failure).");
    // This could be where you hide a spinner or re-enable a button
    $('#status').append(' (Finished)');
  });
});

Организация функций обратного вызова

Методы AJAX в jQuery возвращают объект, похожий на Promise, поэтому Вы можете напрямую объединять методы .done(), .fail() и .always() в цепочку.

Благодаря такой цепочке код становится чище и удобнее для чтения: блоки логики успешного выполнения, ошибки и завершающих действий чётко разделены.

Проверьте свои знания

Рассмотрите следующий AJAX-запрос jQuery:


$.ajax({
  url: "/api/data",
  method: "GET"
})
.done(function() {
  console.log("A");
})
.fail(function() {
  console.log("B");
})
.always(function() {
  console.log("C");
});

Если сервер отвечает ошибкой 404 Not Found, что будет выведено в консоль?

Итоги обработки AJAX-запросов

Вы освоили основные функции обратного вызова для надёжной обработки AJAX-запросов:

.done(): для успешных ответов.
.fail(): для обработки ошибок.
.always(): для действий, которые должны выполняться в любом случае.

Используя их, Ваши приложения смогут корректно обрабатывать сетевые взаимодействия и обеспечивать пользователям более удобную работу, даже если всё идёт не по плану!

Часто задаваемые вопросы

Урок «Обработка ошибок и успешных результатов AJAX» бесплатный?

Да — полный текст урока «Обработка ошибок и успешных результатов AJAX» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Обработка ошибок и успешных результатов AJAX»?

Реализуйте надёжную обработку ошибок с помощью обратных вызовов .fail() и .always(), а успешное получение данных обрабатывайте через .done(), чтобы создавать устойчивые приложения. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Обработка ошибок и успешных результатов AJAX»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Эффективная настройка AJAX-запросов
Обработка ошибок и успешных результатов AJAX
Кросс-доменные AJAX-запросы (CORS/JSONP)

← Назад к jQuery Academy