Разместить здесь вашу рекламу


Axios или Fetch: чем пользоваться в 2019 году?

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.
Axios — это широко известная JavaScript-библиотека. Она представляет собой HTTP-клиент, основанный на промисах и предназначенный для браузеров и для Node.js. Если вы работали в последние несколько лет JavaScript-программистом, то вы, совершенно определённо, этой библиотекой пользовались. В октябре 2019 года пакет Axios был загружен из npm 25 миллионов раз. Кажется, что будущее Axios безоблачно. Но что если я скажу вам, что Axios — это мёртвый проект. Именно этому было посвящено одно обсуждение на Reddit. А именно, речь идёт о следующем:

  • В GitHub-репозитории Axios наблюдается весьма низкий уровень активности разработчиков.
  • Проблемы и PR игнорируются.
  • Команда разработчиков хранит молчание.

Ситуацию ухудшает и широко обсуждаемая уязвимость. Об этой уязвимости сообщено 2017 году. Авторы проекта игнорировали её более двух лет.

Когда библиотека Axios стала популярной, в браузерах не было API, реализующего HTTP-клиент, основанный на промисах. Стандартный интерфейс XML HTTP Request (XHR) был неудобным, работать с ним было тяжело. Разработчики с радостью приняли Axios из-за того, что эта библиотека облегчала им жизнь.



В 2015 вышел API Fetch. Почему же мы, в 2019 году, до сих пор используем Axios? Давайте сравним эти две технологии.

Объём шаблонного кода


▍Fetch


fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))
// {
//   "userId": 1,
//   "id": 1,
//   "title": "delectus aut autem",
//   "completed": false
// }

▍Axios


axios.get("https://jsonplaceholder.typicode.com/todos/1")
  .then(response => console.log("response", response.data))
// {
//   "userId": 1,
//   "id": 1,
//   "title": "delectus aut autem",
//   "completed": false
// }

При использовании Fetch приходится иметь дело с двумя промисами. А вот при работе с Axios у нас есть прямой доступ к JSON-результату в свойстве data объекта ответа.

Метод json() миксина Body принимает поток Response и полностью читает его. Он возвращает промис, который разрешается JSON-результатом разбора текста тела запроса.

Ещё больше шаблонного кода в Fetch приходится использовать при работе с POST-запросами.

▍Fetch


fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify({
    title: "Title of post",
    body: "Post Body"
  })
})
  .then(res => {
    if (!response.ok) throw Error(response.statusText);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.log(error));

▍Axios


axios
  .post("https://jsonplaceholder.typicode.com/posts", {
    title: "Title of post",
    body: "Body of post"
  })
  .then(response => console.log(response.data))
  .catch(error => console.log(error));

Использование Axios позволяет избежать написания больших объёмов шаблонного кода и сделать код чище и понятнее.

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


▍Fetch


fetch("https://jsonplaceholder.typicode.com/todos/100000")
  .then(response => {
    if (!response.ok) throw Error(response.statusText);
    return response.json();
  })
  .then(data => console.log("data", data))
  .catch(error => {
    console.log("error", error);
  });
// error Error: Not Found

▍Axios


axios
  .get("https://jsonplaceholder.typicode.com/todos/100000")
  .then(response => {
    console.log("response", response);
  })
  .catch(error => {
    console.log("error", error);
  });
// error Error: Not Found

Библиотека Axios выдаёт сведения о сетевых ошибках, а API Fetch — нет. Работая с Fetch всегда нужно проверять свойство response.ok. Для того чтобы упростить решение данной задачи, проверку этой ошибки можно оформить в виде отдельной функции:

const checkForError = response => {
  if (!response.ok) throw Error(response.statusText);
  return response.json();
};
fetch("https://jsonplaceholder.typicode.com/todos/100000")
  .then(checkForError)
  .then(data => console.log("data", data))
  .catch(error => {
    console.log("error", error);
  });

Отсутствующие возможности


Axios умеет следить за ходом выгрузки данных. Fetch это не поддерживает. Это может стать решающим фактором выбора технологии для тех, кто разрабатывает приложение, позволяющее пользователям выгружать на сервер фотографии или видеофайлы.

const config = {
  onUploadProgress: event => console.log(event.loaded)
};
axios.put("/api", data, config);

Альтернативные библиотеки


Вот пара альтернатив Axios и API Fetch:

  • Ky — миниатюрный и продуманный HTTP-клиент, основанный на window.fetch.
  • Superagent — маленькая прогрессивная клиентская HTTP-библиотека, основанная на XMLHttpRequest.

Итоги


Чем стоит пользоваться в 2019 году? Это зависит от многого. Например, если вам нужно отслеживать прогресс выгрузки материалов на сервер, то вам лучше всего подойдёт Axios или Superagent. Если вы можете справиться с ограничениями Fetch — тогда вам лучше воспользоваться именно этим API. А для того, чтобы немного улучшить Fetch-код, попробуйте библиотеку-обёртку наподобие Ky.

Уважаемые читатели! Какими HTTP-клиентами вы пользуетесь в своих проектах?


Источник: https://habr.com/ru/company/ruvds/blog/477286/


Интересные статьи

Интересные статьи

Привет. Меня зовут Вадим и я занимаюсь развитием IT-тусовок в Ростове. В 2016 году spasibo_kep написал статью "Едем в город южный: как живут разработчики в Ростове-на-Дoну" о Ростовск...
Сейчас, когда наступил конец года и пришло время подводить итоги, мы хотим оглянуться на проделанную работу, отпраздновать достижения и поблагодарить всех, кто провел 2019 год вместе с Zabbix. ...
Летняя программа Summ3er of h4ck 2019 завершилась, и настало время подвести итоги. В этой статье мы расскажем, каких же результатов добились практиканты отдела анализа защищённости. ...
В Челябинске проходят митапы системных администраторов Sysadminka, и на последнем из них я делал доклад о нашем решении для работы приложений на 1С-Битрикс в Kubernetes. Битрикс, Kubernetes, Сep...
Казалось бы, совсем недавно мы собирались вместе, чтобы послушать доклады о самом актуальном в ИБ, попробовать своими руками сделать что-то кибербезопасное, посмотреть на cold-boot-attack и про...