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