В чем разница между fetch и axios

Вопрос

В чем разница между fetch и axios

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает различия между нативным API fetch и библиотекой Axios, включая их особенности, преимущества и ограничения. Также важно, чтобы кандидат мог объяснить, в каких случаях лучше использовать один инструмент вместо другого.

Ключевые тезисы

• Fetch — это нативный API браузера для выполнения HTTP-запросов, тогда как Axios — это сторонняя библиотека.
• Axios автоматически преобразует данные в JSON, а fetch требует ручного вызова метода .json().
• Axios имеет встроенную поддержку обработки ошибок, в то время как fetch требует проверки статуса ответа вручную.
• Axios поддерживает отмену запросов и установку тайм-аутов, что в fetch требует использования AbortController.
• Axios работает как в браузере, так и в Node.js, а fetch изначально доступен только в браузере.

Подробный ответ

Fetch и Axios — это два популярных инструмента для выполнения HTTP-запросов в JavaScript. Основное отличие заключается в том, что Fetch — это нативный API браузера, доступный в современных браузерах без необходимости установки дополнительных библиотек, тогда как Axios — это сторонняя библиотека, которая требует установки через npm или yarn. Fetch предоставляет базовый функционал для работы с запросами, но требует больше ручного контроля, например, для преобразования данных в JSON или обработки ошибок. Axios, напротив, предлагает более удобный интерфейс, автоматически преобразует данные в JSON и имеет встроенные механизмы для обработки ошибок, отмены запросов и установки тайм-аутов. Еще одно важное отличие — Axios работает как в браузере, так и в Node.js, что делает его универсальным инструментом для работы с HTTP-запросами в разных средах.

Практические примеры

Пример 1

Пример использования fetch для выполнения GET-запроса: fetch('https://api.example.com/data').then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }).then(data => console.log(data)).catch(error => console.error('Error:', error));

Пример 2

Пример использования Axios для выполнения GET-запроса: axios.get('https://api.example.com/data').then(response => console.log(response.data)).catch(error => console.error('Error:', error));

Пример 3

Пример отмены запроса с использованием AbortController в fetch: const controller = new AbortController(); fetch('https://api.example.com/data', { signal: controller.signal }).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error)); controller.abort();

Пример 4

Пример установки тайм-аута в Axios: axios.get('https://api.example.com/data', { timeout: 5000 }).then(response => console.log(response.data)).catch(error => console.error('Error:', error));

Частые ошибки

• Ошибка: Не проверять статус ответа в fetch. Например, если сервер возвращает статус 404, fetch не выбросит ошибку, и нужно вручную проверять свойство response.ok.
• Ошибка: Использовать Axios без необходимости, когда достаточно функционала fetch. Это может привести к увеличению размера бандла приложения.

Связанные темы

• REST API
• Асинхронность в JavaScript
• AbortController
• Интерцепторы в Axios

Follow-up вопросы

Как обрабатываются ошибки в fetch и axios?

Уровень: basic

В fetch ошибки сети автоматически отклоняют промис, но HTTP-ошибки (404, 500) требуют ручной проверки response.ok. Axios отклоняет промис для любых ошибок (HTTP и сети), что упрощает обработку.

Можно ли отменить запрос в fetch? Как?

Уровень: intermediate

Да, с помощью AbortController. Нужно создать контроллер, передать signal в fetch, и вызвать abort() для отмены. Axios использует CancelToken (в старых версиях) или AbortController аналогично.

Какой вариант лучше для работы с REST API и почему?

Уровень: intermediate

Axios удобнее для REST благодаря автоматической трансформации JSON, интерцепторам и встроенной обработке ошибок. Fetch требует больше boilerplate-кода, но не требует зависимостей.

Как реализовать интерцепторы запросов/ответов в fetch?

Уровень: advanced

Вручную: обернуть fetch в функцию, которая модифицирует запрос/ответ. В Axios это встроенная фича через axios.interceptors.request/response.use().

Какие преимущества fetch перед axios?

Уровень: intermediate

1. Нативный API — не требует установки. 2) Лучшая поддержка новых стандартов (например, Streams API). 3) Более гибкий для нестандартных сценариев.