Сравнение JavaScript HTTP-библиотек для браузера

Мы настраиваем дополнительный запрос с выделенным методом для каждого параметра конфигурации, затем вызываем end() для отправки запроса. Функция end() принимает обратный вызов в качестве аргумента для обработки ответа. Если первый аргумент обратного вызова верен, произошла ошибка. Давайте посмотрим на пример:

 var request = require('superagent'); request.post('/orders/') .send({'chocolate': 2, 'placed': '2015-04-26'}) .type('application/json') .accept('json') .end(function(err, res) { if (err) { console.log('Error!'); } else { console.log(res.body); } }); 

axios принимает URL-адрес в качестве первого аргумента, тело запроса в качестве второго аргумента и всю оставшуюся конфигурацию в качестве третьего параметра. Чтобы обработать ответ, вы можете указать два обратных вызова: один для случая успеха (я передам его then ) и один для случая ошибки (я передам его для catch ). Пример использования показан ниже:

 axios.post( '/orders/', { chocolate: 2, placed: '2015-04-26' }, { headers:{ 'Content-type': 'application/json', 'Accept': 'application/json' } } ) .then(function(response) { console.log(response.data); }) .catch(function(response) { console.log('Error!) }); 

Чтобы достичь той же цели с помощью XMLHttpRequest , мы настраиваем метод HTTP и URL в функции open() . Затем мы прикрепляем ответный обратный вызов к обработчику onload и вызываем send для отправки запроса. Пример использования показан ниже:

 var xhr = new XMLHttpRequest(); // The last parameter must be set to true to make an asynchronous request xhr.open('POST', '/orders/', true); xhr.setRequestHeader('Content-type', 'application/json'); xhr.setRequestHeader('Accept', 'application/json'); xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { console.log(xhr.response); } else { console.log('Error !'); } }; xhr.send(); 

Браузер присоединяет данные ответа к самому объекту XMLHttpRequest . Чтобы узнать, произошла ли ошибка, мы должны проанализировать состояние ответа и управлять им так, как мы предпочитаем. В этом случае я регистрирую ответ, возвращенный в случае статуса успеха (от 200 до 299); строка 'Error !' в противном случае.

Получение заказов на основе диапазона дат

Чтобы получить заказы, размещенные в диапазоне дат, мы установим параметры start и end запроса. Функция superagent query() принимает объект, который содержит параметры запроса и их значения:

 request.get('/orders') .query({start: '2015-04-22', end: '2015-04-29'}) .accept('json') .end(function(err, res) { if (err) { /* Handle error */ } else { /* Handle response */ } }); 

axios использует ключ params в объекте конфигурации:

 axios.get( '/orders', { headers: { 'Accept': 'application/json' }, params: { start: '2015-04-22', end: '2015-04-29' } } ); 

Строки запроса не должны содержать определенные символы, особенно & , = и ? , И axios, и superagent позаботятся о том, чтобы экранировать параметры запроса.

При использовании XMLHttpRequest вам необходимо вручную encodeURIComponent() компоненты, используя встроенную функцию encodeURIComponent() в паре ключ-значение строки запроса. Ниже вы можете найти пример того, как вы можете это сделать, даже если для этого конкретного случая это излишне:

 var xhr = new XMLHttpRequest(); xhr.open('GET', '/orders?start=' + encodeURIComponent('2015-04-22') + '&end=' + encodeURIComponent('2015-04-29'), true); 

рекомендации

Хотя axios использует обещания, код выглядит почти идентично superagent. С superagent вы устанавливаете тип контента с помощью специального метода, но с axios вы должны быть осторожны, чтобы избежать опечаток в имени заголовка.

superagent и axios автоматически десериализуют тело запроса в зависимости от типа контента. Вы можете достичь той же цели, установив свойство responseType в экземпляре XMLHttpRequest . Они также обрабатывают все не-200 ответы как ошибки, в то время как XMLHttpRequest предлагает большую гибкость, позволяя вам управлять кодом состояния и затем действовать соответственно.

И суперагент, и Axios работают также на сервере. Однако у superagent самый приятный API на мой взгляд. Но если вы хотите обещания, Axios — ваш лучший выбор. И последнее замечание: если вы можете самостоятельно обрабатывать различия между браузерами или просто ориентироваться на современные браузеры, XMLHttpRequest вполне подойдет.

Вывод

В этой статье мы увидели, как взаимодействовать с простым REST API с использованием необработанного XMLHttpRequest , axios и superagent . Три решения предлагают эквивалентную функциональность, но со своими особенностями. Если вы работаете с современными браузерами, вы можете положиться на XMLHttpRequest . superagent и axios удобны, если вы хотите избежать работы со старыми версиями Internet Explorer и использовать один и тот же API на сервере.

Если вы хотите поиграть с кодом, показанным в этой статье, вы можете получить доступ к репозиторию GitHub, который я создал .