- PVSM.RU - https://www.pvsm.ru -
Axios — это широко известная JavaScript-библиотека. Она представляет собой HTTP-клиент, основанный на промисах и предназначенный для браузеров и для Node.js. Если вы работали в последние несколько лет JavaScript-программистом, то вы, совершенно определённо, этой библиотекой пользовались. В октябре 2019 года пакет Axios был загружен из npm 25 миллионов раз. Кажется, что будущее Axios безоблачно. Но что если я скажу вам, что Axios — это мёртвый проект. Именно этому было посвящено одно обсуждение [1] на Reddit. А именно, речь идёт о следующем:
Ситуацию ухудшает и широко обсуждаемая уязвимость [2]. Об этой уязвимости сообщено 2017 году. Авторы проекта игнорировали её более двух лет.
Когда библиотека Axios стала популярной, в браузерах не было API, реализующего HTTP-клиент, основанный на промисах. Стандартный интерфейс XML HTTP Request (XHR) был неудобным, работать с ним было тяжело. Разработчики с радостью приняли Axios из-за того, что эта библиотека облегчала им жизнь.
В 2015 вышел API Fetch. Почему же мы, в 2019 году, до сих пор используем Axios? Давайте сравним эти две технологии.
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 [4] принимает поток Response [5] и полностью читает его. Он возвращает промис, который разрешается JSON-результатом разбора текста тела запроса.
Ещё больше шаблонного кода в Fetch приходится использовать при работе с 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 выдаёт сведения о сетевых ошибках, а 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:
window.fetch
.XMLHttpRequest
.Чем стоит пользоваться в 2019 году? Это зависит от многого. Например, если вам нужно отслеживать прогресс выгрузки материалов на сервер, то вам лучше всего подойдёт Axios или Superagent. Если вы можете справиться с ограничениями Fetch — тогда вам лучше воспользоваться именно этим API. А для того, чтобы немного улучшить Fetch-код, попробуйте библиотеку-обёртку наподобие Ky.
Уважаемые читатели! Какими HTTP-клиентами вы пользуетесь в своих проектах?
Автор: ru_vds
Источник [8]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/338248
Ссылки в тексте:
[1] обсуждение: https://www.reddit.com/r/javascript/comments/cp5qhm/askjs_the_sad_state_of_axios/
[2] уязвимость: https://snyk.io/blog/a-denial-of-service-vulnerability-discovered-in-the-axios-javascript-package-affecting-all-versions-of-the-popular-http-client/
[3] Image: https://habr.com/ru/company/ruvds/blog/477286/
[4] Body: https://developer.mozilla.org/en-US/docs/Web/API/Body
[5] Response: https://developer.mozilla.org/en-US/docs/Web/API/Response
[6] Ky: https://github.com/sindresorhus/ky
[7] Superagent: https://www.npmjs.com/package/superagent
[8] Источник: https://habr.com/ru/post/477286/?utm_source=habrahabr&utm_medium=rss&utm_campaign=477286
Нажмите здесь для печати.