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 під кожен сервер з котрим будете проацювати

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;

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