Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com

Введение

Axios – это очень популярная библиотека JavaScript, которую можно использовать для выполнения HTTP-запросов. Он работает как на платформах Browser, так и Node.js.

Поддерживает все современные браузеры, включая IE8 и выше.

Он основан на обещаниях, что позволяет нам писать код async/await для очень легкого выполнения запросов XHR.

Использование Axios имеет немало преимуществ перед родным Fetch API:

• поддерживает более старые браузеры (Fetch требует полизаполнения)
• имеет способ отменить запрос
• имеет способ установить время ожидания ответа
• имеет встроенную защиту CSRF
• поддерживает прогресс загрузки
• выполняет автоматическое преобразование данных JSON
• работает в Node.js

Установка

Axios можно установить с помощью npm:

npm install axios

или пряжа:

yarn add axios

или просто добавьте его на свою страницу с помощью unpkg.com:

<script src="https://unpkg.com/axios/dist/axios.min.js"><;/script>

API Axios

Вы можете начать HTTP-запрос с axios объект:

axios({  url: '  method: 'get',  data: {    foo: 'bar'  }})

но для удобства вы обычно используете

(как в jQuery, вы бы использовали $.get() и $.post() вместо $.ajax())

Axios предлагает методы для всех глаголов HTTP, которые менее популярны, но все еще используются:

• axios.delete()
• axios.put()
• axios.patch()
• axios.options()

Он также предлагает метод получения заголовков запроса HTTP, отбрасывая тело.

GET запросы

Одним из удобных способов использования Axios является использование современного (ES2017) синтаксиса async/await.

Этот пример Node.js спрашивает Dog API, чтобы получить список всех пород собак, используя axios.get()и он подсчитывает их:

const axios = require('axios')const getBreeds = async () => {  try {    return await axios.get('  } catch (error) {    console.error(error)  }}const countBreeds = async () => {  const breeds = await getBreeds()  if (breeds.data.message) {    console.log(`Got ${Object.entries(breeds.data.message).length} breeds`)  }}countBreeds()

Если вы не хотите использовать async/await, вы можете использовать синтаксис Promises:

const axios = require('axios')const getBreeds = () => {  try {    return axios.get('  } catch (error) {    console.error(error)  }}const countBreeds = async () => {  const breeds = getBreeds()    .then(response => {      if (response.data.message) {        console.log(          `Got ${Object.entries(response.data.message).length} breeds`        )      }    })    .catch(error => {      console.log(error)    })}countBreeds()

Добавьте параметры к запросам GET

Ответ GET может содержать следующие параметры в URL-адресе: https://site.com/?foo=bar.

С Axios вы можете сделать это, просто используя этот URL-адрес:

axios.get('https://site.com/?foo=bar')

или вы можете использовать a params свойства в параметрах:

axios.get(' {  params: {    foo: 'bar'  }})

POST запросы

Выполнение запроса POST похоже на выполнение запроса GET, но вместо этого axios.getты используешь axios.post:

axios.post('https://site.com/')

Объект, содержащий параметры POST, является вторым аргументом:

axios.post(' { foo: 'bar' })

Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com