Как работать с API на JavaScript: Fetch, Axios и обработка ошибок

1. Нативный Fetch API

Современный стандарт для работы с HTTP-запросами, встроенный в браузеры.

Базовый GET-запрос:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

POST-запрос с заголовками:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token'
  },
  body: JSON.stringify({
    title: 'Новый пост',
    content: 'Содержание поста'
  })
})
.then(handleResponse)
.catch(handleError);

"Fetch API предоставляет низкоуровневый интерфейс для работы с запросами, что даёт гибкость, но требует больше boilerplate-кода." — JavaScript Developer

2. Библиотека Axios

Популярная библиотека для HTTP-запросов с удобным синтаксисом.

Установка:

npm install axios
# или
yarn add axios

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

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      // Ошибка сервера (5xx, 4xx)
      console.log(error.response.status);
      console.log(error.response.data);
    } else if (error.request) {
      // Запрос был сделан, но ответ не получен
      console.log(error.request);
    } else {
      // Ошибка при настройке запроса
      console.log('Error', error.message);
    }
  });

POST-запрос с перехватчиком (interceptor):

// Добавление заголовка авторизации для всех запросов
axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${getToken()}`;
  return config;
});

axios.post('https://api.example.com/posts', {
  title: 'Новый пост',
  content: 'Содержание поста'
})
.then(response => console.log(response.data));

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

Правильная обработка ошибок — критически важная часть работы с API.

Универсальная функция обработки ошибок для Fetch:

async function fetchWithErrorHandling(url, options) {
  try {
    const response = await fetch(url, options);

    if (!response.ok) {
      const error = new Error(response.statusText);
      error.response = response;
      throw error;
    }
    
    const data = await response.json();
    return { response, data };
  } catch (error) {
    if (!error.response) {
      error.response = {
        status: 0,
        statusText: 'Network Error'
      };
    }
    console.error('Ошибка запроса:', error);
    throw error;
  }
}

Типы ошибок, которые нужно обрабатывать:

• Сетевые ошибки (нет соединения)
• Ошибки сервера (500-599)
• Ошибки клиента (400-499)
• Ошибки парсинга ответа
• Таймауты запросов

4. Сравнение Fetch и Axios

"Для простых проектов достаточно Fetch API. Для сложных приложений с множеством запросов Axios может сэкономить много времени." — Senior Frontend Developer

5. Продвинутые техники

Отмена запросов:

// Для Fetch
const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Запрос отменён');
    }
  });

// Отмена запроса
controller.abort();

// Для Axios
const source = axios.CancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Запрос отменён:', error.message);
  }
});

// Отмена запроса
source.cancel('Операция отменена пользователем');

Обработка таймаутов:

// Для Fetch (через AbortController)
const timeoutId = setTimeout(() => controller.abort(), 5000);

// Для Axios
axios.get('https://api.example.com/data', {
  timeout: 5000
})
.catch(error => {
  if (error.code === 'ECONNABORTED') {
    console.log('Превышено время ожидания');
  }
});

Лучшие практики

1. Всегда обрабатывайте ошибки сетевых запросов
2. Используйте интерцепторы для повторяющейся логики (авторизация, логирование)
3. Ограничивайте время выполнения запросов
4. Разделяйте слой API от остального кода
5. Используйте обработчики глобальных ошибок

Полезные ресурсы

• Документация Fetch API (MDN)
• Официальная документация Axios
• Справочник HTTP-статусов
• Примеры интерцепторов Axios

Правильная работа с API сделает ваше приложение более стабильным и удобным для пользователей. Выбирайте подход (Fetch или Axios) в зависимости от требований проекта.