Использование fetch для отправки запросов — отправка GET, POST, PUT, DELETE

Вспоминаем fetch

fetch — это встроенный браузерный API (а на React Native — часть стандартной библиотеки), который позволяет отправлять HTTP-запросы на сервер, получать данные и обрабатывать их.

Вот пример использования fetch:

fetch('https://example.com/api/data')
  .then(response => response.json()) // Преобразуем ответ в JSON
  .then(data => console.log(data)) // Выводим данные в консоли
  .catch(error => console.error('Ошибка:', error)); // Обрабатываем ошибки

Просто, не правда ли? Однако в реальной жизни апельсины не всегда попадают в корзину удачно. Давайте углубимся!

Асинхронная природа fetch

Работа с fetch асинхронная. Запросы могут занимать время, а мы не хотим блокировать наш интерфейс. Поэтому мы используем промисы Promise или синтаксис async/await для работы с этим API.

Пример с async/await (да, мы тусуемся с трендовыми ребятами!):

async function fetchData(url: string) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Ошибка: ${response.status}`);
    }
    const data = await response.json(); // Парсим JSON
    console.log(data);
  } catch (error) {
    console.error('Ошибка запроса:', error);
  }
}

fetchData('https://example.com/api/data');

С помощью async/await наш код становится легче читаемым и более последовательным. Даже не нужно пялиться на вложенные .then.

Работа с методами HTTP: GET, POST, PUT, DELETE

HTTP-запросы можно разделить на основные методы:

• GET: получение данных.
• POST: отправка данных для создания новой записи.
• PUT: обновление данных.
• DELETE: удаление данных.

Посмотрим, как работать с каждым из них.

Метод GET (получение данных)

Для получения данных достаточно использовать fetch с URL. В большинстве случаев метод GET используется по умолчанию.

Пример:

async function getTasks() {
  const response = await fetch('https://example.com/api/tasks');
  if (!response.ok) {
    throw new Error(`Ошибка: ${response.status}`);
  }
  const tasks = await response.json();
  console.log('Список задач:', tasks);
}

getTasks();

GET-запросы чаще всего используются для отображения данных. Например, список задач, пользователей или котиков.

Метод POST (создание данных)

Чтобы создать новые данные, нам нужно передать тело запроса. Обычно это объект (JSON) и заголовок с типом содержимого (Content-Type).

Пример:

async function createTask(task: { title: string; completed: boolean }) {
  const response = await fetch('https://example.com/api/tasks', {
    method: 'POST', // Указываем метод
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(task), // Преобразуем объект в JSON
  });

  if (!response.ok) {
    throw new Error(`Ошибка: ${response.status}`);
  }

  const newTask = await response.json();
  console.log('Созданная задача:', newTask);
}

createTask({
  title: 'Изучить fetch API',
  completed: false,
});

POST-запросы часто используются для отправки форм или создания записей.

Метод PUT (обновление данных)

Чтобы обновить данные, используем метод PUT. Он работает примерно так же, как POST, но указывает, что мы обновляем запись.

Пример:

async function updateTask(taskId: string, updatedData: { title: string; completed: boolean }) {
  const response = await fetch(`https://example.com/api/tasks/${taskId}`, {
    method: 'PUT', // Указываем метод
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(updatedData),
  });

  if (!response.ok) {
    throw new Error(`Ошибка: ${response.status}`);
  }

  const updatedTask = await response.json();
  console.log('Обновленная задача:', updatedTask);
}

updateTask('123', {
  title: 'Обновить fetch API лекцию',
  completed: true,
});

Обновление чаще всего требует идентификатор записи. Поэтому URL содержит taskId.

Метод DELETE (удаление данных)

Удаление данных — это метод с минимальным количеством параметров. Часто достаточно просто указать URL с идентификатором записи.

Пример:

async function deleteTask(taskId: string) {
  const response = await fetch(`https://example.com/api/tasks/${taskId}`, {
    method: 'DELETE', // Указываем метод DELETE
  });

  if (!response.ok) {
    throw new Error(`Ошибка: ${response.status}`);
  }

  console.log(`Задача с ID ${taskId} успешно удалена`);
}

deleteTask('123');

Обработка ошибок

В fetch ошибки запроса (например, сетевые ошибки) обрабатываются с помощью catch. Однако стоит помнить: если сервер возвращает статус 4xx или 5xx, fetch по-прежнему считает запрос успешным. Поэтому нужно проверять response.ok.

Типичный пример:

async function fetchDataWithErrors(url: string) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Ошибка: ${response.status} - ${response.statusText}`);
    }
    const data = await response.json();
    console.log('Полученные данные:', data);
  } catch (error) {
    console.error('Не удалось выполнить запрос:', error);
  }
}

Работа с заголовками

Заголовки HTTP предоставляют дополнительную информацию о запросе. Например, для аутентификации.

Пример с заголовками:

async function fetchWithHeaders(url: string, token: string) {
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}`, // Заголовок для аутентификации
      'Accept': 'application/json',
    },
  });

  if (!response.ok) {
    throw new Error(`Ошибка: ${response.status}`);
  }

  const data = await response.json();
  console.log('Ответ с сервером:', data);
}

fetchWithHeaders('https://example.com/api/secure-data', 'your-jwt-token');

Зачем это нужно?

На практике большинство мобильных приложений полагаются на запросы fetch для связи с сервером. Например:

• Интернет-магазины используют GET для получения товаров и POST для оформления заказа.
• Социальные сети работают с API для загрузки ленты новостей.
• Почтовые клиенты отправляют письма через POST и удаляют через DELETE.