Сравнение двух подходов к HTTP-вызовам в JavaScript

Axios - знаменитый модуль JavaScript. Это HTTP-клиент на основе обещаний для браузеров и NodeJS. Если вы работали с JavaScript в течение последних нескольких лет, вы использовали его.

В октябре 2019 года его скачали с npm более 25 миллионов раз.

Но что, если я скажу вам, что это мертвый проект? Одна ветка на Reddit предполагает именно это.

  • На Github очень мало активности
  • Проблемы с Github и запросы на извлечение игнорируются
  • Нет связи с основной командой

Широко обсуждаемая уязвимость безопасности только усугубила ситуацию. Snyk сообщил об уязвимости в 2017 году. Более двух лет проект игнорировал ее.

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

В 2015 году был выпущен fetch. Итак, почему мы все еще используем аксиомы в 2019 году?

Меньше шаблонов

Использование выборки

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.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.

Дополнительный шаблон более очевиден при работе с запросами POST.

Использование выборки

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
  .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("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
  .get("https://jsonplaceholder.typicode.com/todos/100000")
  .then(response => {
    console.log("response", response);
  })
  .catch(error => {
    console.log("error", error);
  });
// error Error: Not Found

Axios выдает сетевые ошибки, а выборка - нет. При работе с выборкой вы всегда должны проверять свойство 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 может отслеживать прогресс ваших загрузок. Это невозможно с выборкой. Если вы создаете приложение с возможностью загрузки видео или фотографий, это может стать серьезным препятствием.

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

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

  • Ky - миниатюрный и элегантный HTTP-клиент на основе window.fetch
  • Суперагент - Малая прогрессивная клиентская библиотека HTTP-запросов на основе XMLHttpRequest

Так что же использовать в 2019 году?

Это зависит. Если вам нужно отслеживать прогресс загрузки, то лучше всего подойдут axios или superagent. Если вы можете справиться с ограничениями выборки, вам лучше не использовать выборку. Чтобы удалить часть шаблона, попробуйте библиотеку-оболочку, например ky.