Запросы через fetch в React Native

В React Native для выполнения HTTP-запросов к внешним API используется встроенный глобальный метод fetch. Он полностью совместим с тем, что используется в современных браузерах, и не требует установки дополнительных библиотек.

Метод fetch возвращает промис, который разрешается в объект Response. Чтобы получить тело ответа в виде JSON, нужно вызвать метод .json() у этого объекта — он также возвращает промис.

Простейший пример запроса к публичному API:

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const users = await response.json();
    console.log(users);
  } catch (error) {
    console.error('Ошибка сети:', error);
  }
};

Важно помнить два ключевых момента:

  • fetch не выбрасывает ошибку при HTTP-статусах вроде 404 или 500. Он считает их успешными ответами, потому что соединение установлено и сервер ответил. Поэтому нужно дополнительно проверять свойство response.ok (оно равно true, если статус в диапазоне 200–299).
  • Ошибки действительно возникают только при проблемах с сетью: отсутствие интернета, недоступность хоста и т.п.

Пример с проверкой статуса:

const response = await fetch('https://api.example.com/data');
if (!response.ok) {
  throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();

Такой подход позволяет надёжно обрабатывать как сетевые, так и логические ошибки на стороне сервера.

Отправка данных

Для отправки данных (например, при создании ресурса) используется второй аргумент fetch — объект с настройками запроса:

const createUser = async (userData: { name: string; email: string }) => {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData),
  });

  if (!response.ok) {
    throw new Error('Не удалось создать пользователя');
  }

  return await response.json();
};

Этот шаблон применим ко всем типам запросов: GET, POST, PUT, PATCH, DELETE.

Особенности в React Native

В отличие от веба, в React Native:

  • Нет политики CORS — приложение может делать запросы на любой домен без ограничений.
  • Все запросы выполняются через нативные модули (NSURLSession на iOS, OkHttp на Android), поэтому работают даже при отключённом Wi-Fi, если есть мобильный интернет.

Это упрощает интеграцию с бэкендом по сравнению с веб-разработкой.