====== Бібліотека Axios - простий HTTP-клієнт ====== [[https://axios-http.com/|Axios]] ===== Встановлення ===== в терміналі npm install axios потім імпортуємо до проекта import axios from 'axios'; ===== Синтаксис запиту ===== axios({ method: 'get', url: '' }) .then(response => console.log(response)) .catch(error => console.log(error)); axios.get('') .then(response => console.log(response)) .catch(error => console.log(error)) ===== Об'єкт відповіді ===== Об'єкт відповіді на запит містить наступну інформацію. * data — відповідь, надана сервером * status — код стану HTTP з відповіді сервера * statusText — повідомлення про стан HTTP від відповіді сервера * headers — заголовки HTTP, з якими відповів сервер * config — конфігурація, яка була надана Axios для запиту * request — запит, який створив цю відповідь У методі then ти отримаєш наступні властивості в об'єкті відповіді. axios.get('') .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 = ''; 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("", { 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; }