
Содержание статьи
Хотите изучить 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