Представляем Axios, популярный, основанный на Promise HTTP-клиент

Делать запросы

Подобно функции $.ajax

 axios({
  method: 'post',
  url: '/login',
  data: {
    user: 'brunos',
    lastName: 'ilovenodejs'
  }
});

Здесь мы сообщаем Axios, какой метод HTTP мы хотели бы использовать (например, GET / POST / DELETE и т. Д.) И к какому URL должен быть направлен запрос.

Мы также предоставляем некоторые данные для отправки вместе с запросом в виде простого объекта JavaScript из пар ключ / значение. По умолчанию Axios сериализует это как JSON и отправляет как тело запроса.

Варианты запроса

Существует целый ряд дополнительных опций, которые вы можете пропустить при отправке запроса, но вот самые распространенные:

• baseUrl
• headers
• params
• responseTypearraybufferblobdocumenttextstream
• authusernamepassword

Удобные методы

Также как и в jQuery, существуют быстрые методы для выполнения различных типов запросов.

Методы getdeleteheadoptions

 axios.get('/products/5');

Методы postputpatch

 axios.post(
  '/products',
  { name: 'Waffle Iron', price: 21.50 },
  { options }
);

Получение ответа

Как только вы сделаете запрос, Axios вернет обещание, которое будет преобразовано либо в объект ответа, либо в объект ошибки.

 axios.get('/product/9')
  .then(response => console.log(response))
  .catch(error => console.log(error));

Объект ответа

После успешного выполнения запроса обратный вызов then()

• data По умолчанию Axios ожидает JSON и проанализирует его обратно в объект JavaScript для вас.
• status
• statusText
• headers
• config
• requestXMLHttpRequest

Объект ошибки

Если с запросом возникнет проблема, обещание будет отклонено с объектом ошибки, содержащим хотя бы некоторые из следующих свойств:

• message
• response
• requestXMLHttpRequest
• config

Преобразователи и перехватчики

Axios предоставляет несколько полезных функций, вдохновленных библиотекой Angular $ http . Хотя они выглядят одинаково, они имеют несколько разные варианты использования.

Трансформации

Axios позволяет вам предоставлять функции для преобразования исходящих или входящих данных в форме двух параметров конфигурации, которые вы можете установить при выполнении запроса: transformRequesttransformResponse Оба свойства являются массивами, что позволяет объединять несколько функций, через которые будут передаваться данные.

Все функции, передаваемые в transformRequest Они получают данные запроса и объект заголовков в качестве аргументов и должны возвращать измененный объект данных

 const options = {
  transformRequest: [
    (data, headers) => {
      // do something with data
      return data;
    }
  ]
}

Функции могут быть добавлены в transformResponsethen()

Так для чего мы можем использовать преобразования? Один из возможных вариантов использования связан с API, который ожидает данные в определенном формате — скажем, XML или даже CSV. Вы можете настроить пару преобразований для преобразования исходящих и входящих данных в формат, который требует API.

Стоит отметить, что стандартные функции Axios transformRequesttransformResponse

Перехватчики

Хотя преобразования позволяют изменять исходящие и входящие данные, Axios также позволяет добавлять функции, называемые перехватчиками . Как и преобразования, эти функции могут быть активированы при выполнении запроса или при получении ответа.

 // Add a request interceptor
axios.interceptors.request.use((config) => {
    // Do something before request is sent
    return config;
  }, (error) => {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use((response) => {
    // Do something with response data
    return response;
  }, (error) => {
    // Do something with response error
    return Promise.reject(error);
  });

Как вы могли заметить из приведенных выше примеров, перехватчики имеют некоторые важные отличия от преобразований. Вместо того, чтобы просто получать данные или заголовки, перехватчики получают полную конфигурацию запроса или объект ответа.

При создании перехватчиков вы также можете выбрать функцию-обработчик ошибок, которая позволяет вам перехватывать любые ошибки и соответствующим образом их устранять.

Перехватчики запросов могут использоваться для таких вещей, как получение токена из локального хранилища и отправка со всеми запросами , в то время как перехватчик ответов может использоваться для перехвата 401 ответов и перенаправления на страницу входа для авторизации.

Сторонние дополнения

Будучи популярной библиотекой, Axios использует экосистему сторонних библиотек, которые расширяют ее функциональные возможности. От перехватчиков до тестирования адаптеров и регистраторов — доступно довольно много вариантов. Вот некоторые из них, которые, я думаю, могут вам пригодиться:

• axios-mock-adapter : позволяет легко имитировать запросы, чтобы облегчить тестирование вашего кода.
• axios-cache-plugin : оболочка для выборочного кэширования GET-запросов.
• redux-axios-middleware : если вы пользователь Redux, это промежуточное ПО обеспечивает удобный способ отправки Ajax-запросов с помощью простых старых действий.

Список дополнительных дополнений и расширений Axios доступен в репозитории Axios GitHub.

Таким образом, Аксиос может многое порекомендовать. Он имеет простой API с полезными ярлыками, которые будут знакомы всем, кто раньше использовал jQuery. Его популярность и наличие множества сторонних надстроек делают его хорошим выбором для включения в ваши приложения, будь то интерфейс, сервер или оба.