Одна из важнейших задач, которую приходится решать программисту при разработке веб-проектов, заключается в организации обмена данными между клиентскими и серверными частями таких проектов. Это может выглядеть так: пользователь нажимает некую кнопку на странице, открытой в браузере, в ответ система выполняет запрос к серверу, после чего сервер отправляет странице запрошенные у него данные. Для того чтобы вывести такие данные, на странице, без её перезагрузки, производится их обработка, после чего страница обновляется и пользователь получает то, что ему нужно.
В основе подобного взаимодействия систем лежит технология AJAX, в рамках применения которой используется экземпляр объекта
Материал, перевод которого мы сегодня публикуем, посвящён анализу пяти популярных инструментов для работы с HTTP: Axios, Request, Superagent, Fetch и Supertest.
Библиотека Axios, предназначенная для выполнения HTTP-запросов, основана на промисах. Она подходит для использования в среде Node.js и в браузерных приложениях. Библиотека поддерживает все современные браузеры, и, в том числе, IE8+.
Библиотека Superagent, как и Axios, подходит для Node.js и для современных браузеров. Она предоставляет разработчику простое и понятное API, с которым удобно работать.
Для того чтобы выполнить HTTP-запрос средствами Superagent, достаточно вызвать подходящий метод объекта
Библиотека Request, в сравнении с предыдущими рассмотренными инструментами, представляет собой упрощённое средство для выполнения HTTP-запросов. При использовании этой библиотеки приходится писать меньше кода, чем при работе с другими библиотеками. Она не использует промисы, но, если вам эта возможность нужна, вы можете воспользоваться библиотекой Request-Promise, реализующей обёртку вокруг библиотеки Request и позволяющей работать с промисами.
Fetch — это, в отличие от других средств, рассматриваемых в этом обзоре, не библиотека. Это стандартное браузерное API, являющееся альтернативой
Библиотека Supertest основана на библиотеке Superagent. Она предназначена для тестирования HTTP-серверов, построенных на основе Node.js. Supertest даёт разработчику доступ к собственному API и к низкоуровневому API, предоставляемому библиотекой Superagent.
В этом материале мы рассмотрели несколько популярных инструментов для работы с HTTP, которые пригодятся JS-разработчикам, создающим приложения, использующие технологии браузеров и платформы Node.js. При подборе базы для HTTP-подсистемы некоего проекта рекомендуется сначала опробовать несколько средств, выглядящих подходящими, а потом уже принимать окончательное решение.
Уважаемые читатели! Какими HTTP-библиотеками вы пользуетесь?
В основе подобного взаимодействия систем лежит технология AJAX, в рамках применения которой используется экземпляр объекта
XMLHttpRequest. Для того чтобы облегчить программистам работу с AJAX и XMLHttpRequest, созданы специализированные библиотеки, которые предоставляют разработчикам удобные интерфейсы, избавляя их от необходимости пользоваться низкоуровневыми механизмами.Материал, перевод которого мы сегодня публикуем, посвящён анализу пяти популярных инструментов для работы с HTTP: Axios, Request, Superagent, Fetch и Supertest.
Axios
Библиотека Axios, предназначенная для выполнения HTTP-запросов, основана на промисах. Она подходит для использования в среде Node.js и в браузерных приложениях. Библиотека поддерживает все современные браузеры, и, в том числе, IE8+.
?Сильные стороны
- Работает в среде Node.js и в браузерах.
- Поддерживает промисы.
- Позволяет выполнять и отменять запросы.
- Позволяет задавать тайм-аут ответа.
- Поддерживает защиту от XSRF-атак.
- Позволяет перехватывать запросы и ответы.
- Поддерживает индикацию прогресса выгрузки данных.
- Широко используется в проектах, основанных на React и Vue.
?Слабые стороны
- Библиотекой довольно сложно пользоваться.
Superagent
Библиотека Superagent, как и Axios, подходит для Node.js и для современных браузеров. Она предоставляет разработчику простое и понятное API, с которым удобно работать.
Для того чтобы выполнить HTTP-запрос средствами Superagent, достаточно вызвать подходящий метод объекта
request:request
.get('')
.then(res => log(res))
.catch(err => log(err))?Сильные стороны
- Поддерживает плагины.
- Поддаётся конфигурированию.
- Имеет приятный интерфейс для выполнения HTTP-запросов.
- Поддерживает объединение в цепочку нескольких вызовов для выполнения запросов.
- Работает в среде Node.js и в браузерах.
- Поддерживает индикацию прогресса для выгрузки и загрузки данных.
- Поддерживает механизм chunked-transfer encoding.
- Поддерживает коллбэки.
- Для этой библиотеки разработано множество плагинов.
?Слабые стороны
- Имеет своеобразное API, не придерживающееся каких-либо стандартов.
Request
Библиотека Request, в сравнении с предыдущими рассмотренными инструментами, представляет собой упрощённое средство для выполнения HTTP-запросов. При использовании этой библиотеки приходится писать меньше кода, чем при работе с другими библиотеками. Она не использует промисы, но, если вам эта возможность нужна, вы можете воспользоваться библиотекой Request-Promise, реализующей обёртку вокруг библиотеки Request и позволяющей работать с промисами.
?Сильные стороны
- API, которым легко пользоваться.
?Слабые стороны
- Библиотека не использует промисы.
Fetch
Fetch — это, в отличие от других средств, рассматриваемых в этом обзоре, не библиотека. Это стандартное браузерное API, являющееся альтернативой
XMLHttpRequest.?Сильные стороны
- Гибкость и простота в использовании.
- Применение промисов, что позволяет избежать «ада коллбэков».
- Поддержка всеми современными браузерами.
- Следование подходу «запрос — ответ».
- Простой и приятный синтаксис.
- Поддерживается в React Native.
?Слабые стороны
- Не работает в серверной среде.
- Не реализует некоторые возможности, имеющиеся в HTTP-библиотеках, такие, как отмена запроса.
- Не содержит встроенной поддержки параметров, задаваемых по умолчанию, наподобие режима запроса, заголовков, учётных данных.
Supertest
Библиотека Supertest основана на библиотеке Superagent. Она предназначена для тестирования HTTP-серверов, построенных на основе Node.js. Supertest даёт разработчику доступ к собственному API и к низкоуровневому API, предоставляемому библиотекой Superagent.
?Сильные стороны
- Имеет удобное API.
- Упрощает конструирование HTTP-тестов.
- Может быть использована совместно с такими библиотеками для тестирования проектов, как Chai.js и Mocha.
?Слабые стороны
- Не работает в браузерах.
Итоги
В этом материале мы рассмотрели несколько популярных инструментов для работы с HTTP, которые пригодятся JS-разработчикам, создающим приложения, использующие технологии браузеров и платформы Node.js. При подборе базы для HTTP-подсистемы некоего проекта рекомендуется сначала опробовать несколько средств, выглядящих подходящими, а потом уже принимать окончательное решение.
Уважаемые читатели! Какими HTTP-библиотеками вы пользуетесь?
Комментарии (20)
legos
12.12.2018 12:50Неужели стандартного fetch недостаточно?
worldxaker
12.12.2018 12:55+1там нельзя отменить запрос
Vadem
12.12.2018 13:37+1С AbortController отменять уже можно, а вот за прогрессом следить всё ещё нельзя, насколько я знаю.
JustDont
12.12.2018 16:34Если у вас задумано некое server-side исполнение кода (не важно в каком контексте) — то случается небольшая проблемка: fetch в контексте сервера просто нет. И либо велосипед, либо таки взять одну из библиотек, которая умеет и в браузере и в ноде работать единообразно.
Так что вот шаг влево, шаг вправо — и всё быстро становится гораздо менее очевидным и более сложным.
justboris
12.12.2018 23:10-1fetch никак не обрабатывает статус-коды и требует специального обращения, чтобы распарсить json.
function readJson () { return fetch('/path/to/api') .then(response => { if (!response.ok) { throw new Error("HTTP error " + response.status); } return response.json(); }) .then(json => { console.log(json); }) .catch(error => { console.error(error) }) }
Код взят отсюда: https://stackoverflow.com/a/51859415/1297743
В библиотеках эти штуки уже идут из коробки, в результате код сверху сокращается до одной строчки:
axios.get('/path/to/api').then(data => console.log(data), err => console.error(err)
yarkov
12.12.2018 18:00+3А приведите пример, когда axios сложно пользоваться. Что-то я за года 3 активного использования сложностей не увидел.
Anshi85
12.12.2018 22:22Объясните нубу пожалуйста, описанные в статье библиотеки нужны для пересылки данных из браузера на бекенд? У меня есть небольшой опыт реализации приложения на стеке MEAN (ангуляр первый), там я отправлял все данные с фронтенда на бекенд с помощью ангуляра.
justboris
12.12.2018 23:15Добавлю еще две полезные библиотеки:
- https://github.com/developit/unfetch – минималистичный полифилл fetch (500 байт)
- https://github.com/sindresorhus/ky – обертка над fetch, включает обработку не-200 статус-кодов, облегчает работу с JSON (1 Кб)
Aquahawk
Где то мир явно свернул не туда, если в Браузере, основой которого является HTPP запросы нам нужна библиотека для работы с ними.
ivorobioff
ну это скорее врапперы для более удобной работы с http (aka ajax) запросами в браузере
staticlab
Так низкоуровневый XMLHttpRequest есть, а в современных есть и высокоуровневый fetch.
lam0x86
Что уж там. Самой большой ошибкой человечества было изобретение колеса. Ведь бегали же нормально, зачем что-то придумывать!
worldxaker
дело в том что есть fetch который умеет в промисы но не умеет в отмену запросов и есть xhr который не умеет в промисы зато умеет в отмену запросов. а есть библиотеки которые могут и в промисы и в отмену запросов
markmariner
А зачем вам отмена запросов, если фактически запрос на сервере всё равно выполнится? Как вы это используете?