Бібліотека Axios - простий HTTP-клієнт
Встановлення
в терміналі
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; }