Прості HTTP-запити в JavaScript за допомогою Axios

Зацікавлені у вивченні JavaScript? Отримайте мою електронну книгу на jshandbook.com

Вступ

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

Is підтримує всі сучасні браузери, включаючи IE8 та новіші.

Він заснований на обіцянках, і це дозволяє нам писати код асинхронізації / очікування, щоб дуже легко виконувати запити XHR.

Використання Axios має чимало переваг перед власним Fetch API:

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

Встановлення

Axios можна встановити за допомогою npm:

npm install axios

або пряжа:

yarn add axios

або просто включіть його на свою сторінку за допомогою unpkg.com:

API Axios

Ви можете запустити HTTP-запит з axiosоб'єкта:

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

але для зручності ви зазвичай будете використовувати

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

(Як в JQuery, можна використовувати $.get()і $.post()замість $.ajax())

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

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

Він також пропонує метод отримання заголовків HTTP запиту, відкидаючи тіло.

ОТРИМАТИ запити

Одним із зручних способів використання Axios є використання сучасного синтаксису async / await (ES2017).

Цей приклад Node.js запитує API собак, щоб отримати список усіх порід собак, використовуючи axios.get(), і він підраховує їх:

const axios = require('axios')const getBreeds = async () => { try { return await axios.get('//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, ви можете використовувати синтаксис Promises:

const axios = require('axios')const getBreeds = () => { try { return axios.get('//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

Відповідь GET може містити параметри в URL, як це: //site.com/?foo=bar.

За допомогою Axios ви можете зробити це, просто використовуючи цю URL-адресу:

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

або ви можете використовувати paramsвластивість у параметрах:

axios.get('//site.com/', { params: { foo: 'bar' }})

POST запити

Виконання запиту POST так само, як виконання запиту GET, але замість цього axios.getви використовуєте axios.post:

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

Об'єкт, що містить параметри POST, є другим аргументом:

axios.post('//site.com/', { foo: 'bar' })
Зацікавлені у вивченні JavaScript? Отримайте мою електронну книгу на jshandbook.com