Бібліотека 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;