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

• Введение в Axios
• Видеоурок
• Установка
• API-интерфейс Аксиомы
• ПОЛУЧАТЬ запросы
• Добавьте параметры для получения запросов
• ОТПРАВЛЯТЬ запросы /ОГЛАВЛЕНИЕ

Введение в Axios

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

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

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

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

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

Видеоурок

Посмотрите это видео, где я создаю экспресс-сервер, который предлагает конечную точку ПУБЛИКАЦИИ, и я делаю запрос Axios к нему для публикации данных:

Установка

Аксиомы могут быть установлены для использования в Node.js использование npm:

npm install axios

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

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

API-интерфейс Аксиомы

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

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.получить()
• аксиос.пост()

Для старичков, как в jQuery, вы бы использовали $.get () и $.опубликовать () вместо $.ajax ()

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

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

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

• аксиос.удалить()
• axios.положить()
• аксиос.патч()
• axios.параметры()

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

ПОЛУЧАТЬ запросы

Этот Node.js пример запрашивает Dog 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 ${Object.entries(breeds.data.message).length} 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 ${Object.entries(response.data.message).length} breeds`
        )
      }
    })
    .catch(error => {
      console.log(error)
    })
}

countBreeds()

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

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

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

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

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

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

ОТПРАВЛЯТЬ запросы

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

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

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

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

Оригинал: “https://flaviocopes.com/axios/”