Как можно делать запросы в JavaScript помимо axios

Вопрос

Как можно делать запросы в JavaScript помимо axios

Профессия

Frontend Developer

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

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

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

• Нативный Fetch API — современный стандарт для HTTP-запросов, поддерживается всеми браузерами. Позволяет работать с промисами и имеет простой синтаксис.
• XMLHttpRequest (XHR) — устаревший, но до сих пор поддерживаемый способ, который использовался до появления Fetch API. Подходит для legacy-кода.
• Библиотеки, такие как jQuery.ajax() — простой синтаксис, но сейчас редко используется из-за избыточности jQuery для таких задач.
• WebSocket — для двусторонней связи с сервером в реальном времени, если нужны постоянные соединения.
• GraphQL-клиенты (например, Apollo Client или Relay) — для работы с GraphQL API, позволяют оптимизировать запросы и управлять состоянием.
• Специализированные SDK (например, Firebase SDK, AWS SDK) — для работы с конкретными сервисами, часто включают свои методы для запросов.

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

В JavaScript существует несколько способов выполнения HTTP-запросов помимо axios. Наиболее современным и популярным является Fetch API, который предоставляет простой интерфейс для работы с промисами и поддерживается всеми современными браузерами. Fetch API позволяет легко отправлять GET, POST, PUT, DELETE и другие типы запросов, а также обрабатывать ответы в формате JSON, текста или бинарных данных. Однако, в отличие от axios, Fetch API не обрабатывает ошибки HTTP-статусов автоматически, что требует дополнительной проверки в коде. XMLHttpRequest (XHR) — это устаревший, но все еще поддерживаемый способ, который использовался до появления Fetch API. Он более многословен и сложен в использовании, но может быть полезен в legacy-проектах. Для работы с GraphQL API существуют специализированные клиенты, такие как Apollo Client или Relay, которые предоставляют удобные методы для выполнения запросов и управления состоянием. WebSocket используется для двусторонней связи с сервером в реальном времени, что полезно для чатов, уведомлений и других интерактивных приложений. Специализированные SDK, такие как Firebase SDK или AWS SDK, предоставляют свои методы для работы с API конкретных сервисов, что может упростить интеграцию.

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

Пример 1

Пример использования Fetch API для 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

Пример использования XMLHttpRequest для POST-запроса:

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.send(JSON.stringify({ key: 'value' }));

Пример 3

Пример использования WebSocket для установки соединения:

const socket = new WebSocket('wss://api.example.com/socket');
socket.onopen = function() {
  console.log('Connection established');
  socket.send('Hello server!');
};
socket.onmessage = function(event) {
  console.log('Message from server:', event.data);
};

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

• Игнорирование проверки статуса ответа в Fetch API. Многие забывают, что Fetch API не отклоняет промис при HTTP-ошибках (например, 404 или 500), что может привести к неожиданному поведению.
• Использование устаревших методов, таких как jQuery.ajax(), без необходимости. Это может увеличить размер бандла и усложнить поддержку кода.
• Неправильная обработка ошибок в WebSocket, что может привести к незаметным разрывам соединения и потере данных.

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

• Промисы и async/await в JavaScript
• REST и GraphQL API
• Управление состоянием в клиентских приложениях
• Оптимизация производительности при работе с сетью

Follow-up вопросы

Какие преимущества и недостатки у Fetch API по сравнению с axios?

Уровень: intermediate

Fetch API встроен в браузеры, не требует дополнительных зависимостей, но требует ручного преобразования ответа в JSON и не имеет встроенной обработки ошибок HTTP-статусов. Axios автоматически преобразует данные, перехватывает ошибки и поддерживает отмену запросов.

Как обрабатывать ошибки в Fetch API?

Уровень: basic

Ошибки сети автоматически отклоняют промис, но HTTP-статусы (например, 404) требуют ручной проверки через response.ok или response.status. Пример: if (!response.ok) throw new Error('HTTP error');

Когда стоит использовать WebSocket вместо HTTP-запросов?

Уровень: intermediate

WebSocket подходит для приложений с постоянным двусторонним обменом данными в реальном времени (чаты, игры, биржевые тикеры). HTTP-запросы лучше для разовых операций (получение данных, отправка форм).

Как можно отменить HTTP-запрос в JavaScript?

Уровень: advanced

В Fetch API через AbortController, в axios через CancelToken (в старых версиях) или AbortController. В XHR — методом abort().

Чем GraphQL-клиенты отличаются от REST-подходов?

Уровень: intermediate

GraphQL позволяет запрашивать только нужные данные за один запрос, избегая over/under-fetching. Клиенты вроде Apollo кэшируют данные и управляют состоянием, тогда как REST требует множественных запросов к разным эндпоинтам.