HTTP-запросы с использованием Axios

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

Введение в Axios

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

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

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

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

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

Видеоурок

Посмотрите это видео, где я создаю сервер Express, который предлагает конечную точку POST, и делаю к нему запрос Axios для публикации данных:


Установка

Axios можно установить для использования в Node.js, используяnpm:

npm install axios

В браузере вы можете включить его на свою страницу, используя unpkg.com:

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

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

API Axios

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

axios({
  url: 'https://dog.ceo/api/breeds/list/all',
  method: 'get'
})

Это возвращаетобещать. Вы можете использовать async / await для разрешения этого обещания объекту ответа:

;(async () => {
  const response = await axios({
    url: 'https://dog.ceo/api/breeds/list/all',
    method: 'get'
  })

console.log(response) })()

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

  • axios.get()
  • axios.post()

Для старых, как и в jQuery, вы должны использовать$.get()и$.post()вместо$.ajax()

Они предлагают более простой синтаксис. Например:

;(async () => {
  const response = await axios.get('https://dog.ceo/api/breeds/list/all')
  console.log(response)
})()

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

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

и метод получения HTTP-заголовков запроса, отбрасывая тело,axios.head().

GET запросы

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

const axios = require('axios')

const getBreeds = async () => { try { return await axios.get(https://dog.ceo/api/breeds/list/all) } catch (error) { console.error(error) } }

const countBreeds = async () => { const breeds = await getBreeds()

if (breeds.data.message) { console.log(Got </span><span style="color:#e6db74">${</span>Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">breeds</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>).<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> breeds) } }

countBreeds()

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

const axios = require('axios')

const getBreeds = () => { try { return axios.get(https://dog.ceo/api/breeds/list/all) } catch (error) { console.error(error) } }

const countBreeds = async () => { const breeds = getBreeds() .then(response => { if (response.data.message) { console.log( Got </span><span style="color:#e6db74">${</span>Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">response</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>).<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> breeds ) } }) .catch(error => { console.log(error) }) }

countBreeds()

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

Ответ GET может содержать параметры в URL-адресе, например:https://site.com/?name=Flavio.

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

axios.get('https://site.com/?name=Flavio')

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

axios.get('https://site.com/', {
  params: {
    name: 'Flavio'
  }
})

POST запросы

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

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

Второй аргумент - объект, содержащий параметры POST:

axios.post('https://site.com/', {
  name: 'Flavio'
})

Скачать мою бесплатнуюСправочник по Node.js


Дополнительные руководства по узлам: