Бібліотека Axios - простий HTTP-клієнт

Axios

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

в терміналі

npm install axios

потім імпортуємо до проекта

import axios from 'axios';

Синтаксис запиту

axios({
method: 'get',
url: '<https://jsonplaceholder.typicode.com/users>'
})
.then(response => console.log(response))
.catch(error => console.log(error));

axios.get('<https://jsonplaceholder.typicode.com/users>')
.then(response => console.log(response))
.catch(error => console.log(error))

Об'єкт відповіді

Об'єкт відповіді на запит містить наступну інформацію.

data — відповідь, надана сервером

status — код стану HTTP з відповіді сервера

statusText — повідомлення про стан HTTP від відповіді сервера

headers — заголовки HTTP, з якими відповів сервер

config — конфігурація, яка була надана Axios для запиту

request — запит, який створив цю відповідь

У методі then ти отримаєш наступні властивості в об'єкті відповіді.

axios.get('<https://jsonplaceholder.typicode.com/users>')
.then(response => {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
})
.catch(error => {
console.log(error);
})

Конфігурація за замовчуванням

Уяви ситуацію, коли в тебе є кілька запитів з однаковою базовою адресою сервера, але до різних ресурсів. Розробнику доводиться повторювати базову адресу (https://jsonplaceholder.typicode.com) у коді кожного запиту, що не дуже зручно.

import axios from "axios";
axios.defaults.baseURL = '<https://jsonplaceholder.typicode.com>';
axios.get('/users')
.then()
.catch();
axios.get('/posts')
.then()
.catch();
axios.get('/images')
.then()
.catch();

Заголовки за замовчуванням

Окрім базової адреси, можна також вказати необхідні стандартні заголовки запиту. Наприклад, якщо у тебе є унікальний ключ API, який необхідно додавати до кожного запиту у вигляді HTTP-заголовка, ти можеш додати його до властивості axios.defaults.headers.common.

const myApiKey = "secret-api-key-for-every-request";
axios.defaults.headers.common["header-name"] = myApiKey;

Параметри рядка запиту

Axios надає нам зручніший спосіб. В об'єкті конфігурації (параметр config) ти можеш вказати об'єкт параметрів у властивості params.

axios.get("<https://jsonplaceholder.typicode.com/users>", {
params: {
_limit: 7,
_sort: "name"
}
});

Створення екземпляру класу axios

Для того щоб не змінювати значення за замовчанням для усього axios (наприклад базову адресу, або то що), то можна створити декілька класів axios під кожен сервер з котрим будете проацювати

const myAxiosClass = axios.create({
baseURL: 'http://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'},
});

І тепер можна працювати через цей власний екземпляр класу з своїми налаштуваннями

const res = await myAxiosClass.get();
return res.data;

Приклади axios

Приклад 1

async createUser (user) {
const url = 'http://localhost:3000/users';
const response = await axios.post (url, user);
return response.data;
}