Основы работы с fetch — базовые методы GET, POST, PUT, DELETE

Почему fetch?

Добро пожаловать на лекцию, где мы будем говорить о таком важном аспекте взаимодействия фронтенда с сервером, как выполнение HTTP-запросов с использованием встроенного в браузер метода fetch. Разберём базовые методы, такие как GET, POST, PUT, DELETE, а также научимся обрабатывать ответы, ошибки и разбираться в структуре запросов. Погнали!

Метод fetch — это встроенная функция JavaScript для выполнения HTTP-запросов. Он заменил устаревший XMLHttpRequest и стал стандартом взаимодействия с API. Вот несколько причин, почему fetch так популярен:

1. Простота использования: лёгкий синтаксис на основе промисов.
2. Гибкость: полная поддержка HTTP-заголовков, методов, тела запроса и других настроек.
3. Кросс-платформенность: работает в большинстве современных браузеров.

Основы fetch

Вот базовая структура вызова функции fetch:

fetch(url: string, options?: RequestInit): Promise<Response>

• url — это адрес, куда отправляется запрос.
• options — объект с настройками запроса, который позволяет указать метод, заголовки, тело и многое другое.
• Возвращается объект Promise<Response>, который можно обработать с помощью .then() или async/await.

Пример GET-запроса

Начнём с самого простого — отправка запроса на сервер, чтобы "забрать" какие-то данные.

// Пример простого GET-запроса
fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP ошибка! Статус: ${response.status}`);
    }
    return response.json(); // Парсим ответ в JSON
  })
  .then((data) => {
    console.log('Данные с сервера:', data); // Работаем с полученными данными
  })
  .catch((error) => {
    console.error('Ошибка при выполнении запроса:', error);
  });

Здесь:

• Запрос отправляется на https://jsonplaceholder.typicode.com/posts.
• Метод по умолчанию для fetch — GET.
• Мы проверяем, была ли ошибка на уровне HTTP (например, код 404 или 500).
• Затем преобразуем данные из ответа в формат JSON и работаем с ними.

Пример POST-запроса

Теперь отправим немного данных на сервер. Для этого используется метод POST. Не забудьте про заголовок Content-Type, чтобы сервер понял, что мы отправляем JSON!

// Пример POST-запроса
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST', // Задаём метод запроса
  headers: {
    'Content-Type': 'application/json', // Указываем тип отправляемых данных
  },
  body: JSON.stringify({
    title: 'Новая запись',
    body: 'Здесь текст новой записи',
    userId: 1,
  }), // Преобразуем объект в строку JSON
})
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP ошибка! Статус: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log('Ответ от сервера:', data);
  })
  .catch((error) => {
    console.error('Ошибка при выполнении запроса POST:', error);
  });

Обратите внимание, как удобно настраивать тело запроса и заголовки в объекте options.

Пример PUT-запроса

Метод PUT используется, чтобы полностью заменить существующую запись на сервере. Например, обновим запись с ID = 1:

// Пример PUT-запроса
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    id: 1,
    title: 'Обновлённая запись',
    body: 'Новый текст после обновления',
    userId: 1,
  }),
})
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP ошибка! Статус: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log('Запись успешно обновлена:', data);
  })
  .catch((error) => {
    console.error('Ошибка при выполнении запроса PUT:', error);
  });

Пример DELETE-запроса

И, наконец, метод DELETE, чтобы удалить запись:

// Пример DELETE-запроса
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE',
})
  .then((response) => {
    if (response.ok) {
      console.log('Запись успешно удалена!');
    } else {
      throw new Error(`HTTP ошибка! Статус: ${response.status}`);
    }
  })
  .catch((error) => {
    console.error('Ошибка при выполнении запроса DELETE:', error);
  });

Работа с промисами

Работа с fetch построена на промисах, что отлично подходит для асинхронного кода. Тем не менее, можно переписать те же примеры с использованием async/await, чтобы избежать глубокой вложенности:

// GET-запрос с использованием async/await
const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error(`HTTP ошибка! Статус: ${response.status}`);
    }
    const data = await response.json();
    console.log('Данные с сервера:', data);
  } catch (error) {
    console.error('Ошибка при выполнении запроса:', error);
  }
};

fetchData();

Типичные ошибки при работе с fetch

1. Не проверяется код ответа. Даже если запрос успешен (не падает с ошибкой сети), сервер может вернуть статус 404 или 500. Обязательно проверяйте свойство response.ok.

2. Неправильная обработка тела запроса. Забудете указать Content-Type, и сервер решит, что вы отправляете XML. Всегда проверяйте, что отправляемые данные корректно сериализованы в JSON.

3. Отсутствие обработки ошибок. Если не использовать try/catch или метод catch(), сложно отследить проблемы с сетью или сервером.

Практическая польза

На собеседованиях вас обязательно спросят: "Как вы работаете с REST API и отправляете запросы в React?". Умение грамотно настроить fetch, обработать коды статусов и ошибки — это важный навык любого фронтенд-разработчика. Также это знание пригодится вам для создания пользовательских интерфейсов, где данные нужно получать или отправлять в реальном времени.

1

Задача

Модуль 3: React, 11 уровень, 1 лекция

Недоступна

Выполнение GET-запроса

Выполнение GET-запроса

Открыть

1

Задача

Модуль 3: React, 11 уровень, 1 лекция

Недоступна

Отправка данных через POST-запрос

Отправка данных через POST-запрос

Открыть