axios-http_prostij_http-klijent_alternativa_standartnomu_fetch_api [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Бібліотека  Axios - простий HTTP-клієнт ======
[[https://axios-http.com/|Axios]]

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

</code>
===== Конфігурація за замовчуванням =====
Уяви ситуацію, коли в тебе є кілька запитів з однаковою базовою адресою сервера, але до різних ресурсів. Розробнику доводиться повторювати базову адресу (https://jsonplaceholder.typicode.com) у коді кожного запиту, що не дуже зручно.
<code>
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();

</code>
===== Заголовки за замовчуванням =====
Окрім базової адреси, можна також вказати необхідні стандартні заголовки запиту. Наприклад, якщо у тебе є унікальний ключ API, який необхідно додавати до кожного запиту у вигляді HTTP-заголовка, ти можеш додати його до властивості axios.defaults.headers.common.
<code>
const myApiKey = "secret-api-key-for-every-request";

axios.defaults.headers.common["header-name"] = myApiKey;
</code>
===== Параметри рядка запиту =====
Axios надає нам зручніший спосіб. В об'єкті конфігурації (параметр config) ти можеш вказати об'єкт параметрів у властивості params.
<code>
axios.get("<https://jsonplaceholder.typicode.com/users>", {
	params: {
		_limit: 7,
		_sort: "name"
	}
});

</code>
===== Створення екземпляру класу axios  =====
Для того щоб не змінювати значення за замовчанням для усього axios  (наприклад базову адресу, або то що), то можна створити декілька класів axios  під кожен сервер з котрим будете проацювати
<code>
const myAxiosClass = axios.create({
  baseURL: 'http://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'},
});
</code>
І тепер можна працювати через цей власний екземпляр класу з своїми налаштуваннями
<code>
const res = await myAxiosClass.get();
return res.data;
</code>
====== Приклади axios ======
===== Приклад 1 =====

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