5.1 Fetch API
Для виконання HTTP-запитів в JavaScript часто використовуються дві бібліотеки: вбудована функція fetch і стороння бібліотека Axios. Обидві вони надають потужні та гнучкі можливості для взаємодії з API та іншими веб-ресурсами.
Fetch API — це вбудований у браузер спосіб виконання HTTP-запитів. Він базується на промісах і надає гнучкий і сучасний підхід до роботи з мережевими запитами.
Синтаксис простого fetch-запиту:
let promise = fetch(url, {method, headers,
body})
Основні концепції Fetch:
fetch(url, options): основний метод для виконання HTTP-запитів- Повертає проміс, який виконується в об'єкт Response
Приклад простого GET-запиту з використанням Fetch:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Помилка мережі: отримано некоректну відповідь від сервера');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Помилка при виконанні запиту: ', error);
});
Приклад POST-запиту з використанням Fetch:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Помилка при виконанні запиту: ', error);
});
Налаштування Fetch
Fetch API дозволяє налаштувати різні параметри запиту через об'єкт options, такі як метод, заголовки, тіло запиту та інші.
const options = {
method: 'GET', // або 'POST', 'PUT', 'DELETE' і т.д.
headers: {
'Content-Type': 'application/json'
},
// body: JSON.stringify(data) // використовується для POST і PUT запитів
};
fetch('https://jsonplaceholder.typicode.com/posts/1', options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Помилка при виконанні запиту: ', error));
5.2 Бібліотека Axios
Axios — це популярна бібліотека для виконання HTTP-запитів в JavaScript. Вона надає більш зручний і функціональний API у порівнянні з нативним Fetch API, а також підтримує безліч додаткових можливостей, таких як автоматичне перетворення JSON, обробка таймаутів, переривання запитів і підтримка старих браузерів.
Встановлення Axios
Axios можна встановити через npm або підключити через CDN.
Встановлення через npm:
npm install axios
Підключення в Node.js або при використанні модульних збирачів (наприклад, Webpack):
// Для CommonJS
const axios = require('axios');
// Для ES6 модулів
import axios from 'axios';
Підключення через CDN у браузері:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Синтаксис простого GET-запиту:
let promise = axios.get(url)
Синтаксис простого POST-запиту:
let promise = axios.post(url, data, config)
Основні концепції Axios:
- axios(config): основний метод для виконання HTTP-запитів
- Приймає об'єкт конфігурації, який може включати
url,method,headers,dataта інші параметри. - Методи-ярлики: Axios надає методи для кожного HTTP-методу (
axios.get,axios.post,axios.put,axios.deleteі т.д.), що спрощує виконання відповідних запитів. - Проміси: всі методи Axios повертають Promise (проміс), який виконується в об'єкт відповіді або відхиляється у разі помилки.
Синтаксис простого GET-запиту з обробкою відповіді та помилок:
axios.get(url)
.then(response => {
// Обробка успішної відповіді
})
.catch(error => {
// Обробка помилки
});
Синтаксис простого POST-запиту з обробкою відповіді та помилок:
axios.post(url, data, config)
.then(response => {
// Обробка успішної відповіді
})
.catch(error => {
// Обробка помилки
});
Приклад простого GET-запиту з використанням Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Помилка при виконанні запиту: ', error);
});
Приклад POST-запиту з використанням Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Помилка при виконанні запиту: ', error);
});
5.3 Конфігурування Axios
Налаштування Axios
Axios дозволяє конфігурувати HTTP-запити за допомогою об'єкта config, який включає такі параметри, як url, method, headers і дані (data). Нижче наведено базовий приклад конфігурації запиту:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
const config = {
method: 'get', // може бути 'get', 'post', 'put', 'delete' і т.д.
url: 'https://jsonplaceholder.typicode.com/posts/1',
headers: {
'Content-Type': 'application/json' // Заголовок для вказання типу даних
},
// data: JSON.stringify(data) // Використовується для POST і PUT запитів для передачі тіла запиту
};
axios(config)
.then(response => console.log(response.data))
.catch(error => console.error('Помилка при виконанні запиту: ', error));
Додаткові можливості Axios:
- Параметри запиту: можна передавати параметри запиту в URL.
- Переривання запитів: з використанням
AbortController. - Таймаути: встановлення часу очікування для запиту.
Приклад використання параметрів запиту:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1 // Параметри запиту передаються через об'єкт params
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Помилка при виконанні запиту: ', error);
});
5.4 Порівняння Fetch і Axios
Тепер розглянемо Fetch і Axios у порівнянні за ключовими показниками:
1. Простота використання:
- Fetch: легкий у використанні для базових операцій, але потребує додаткової обробки для складних сценаріїв (наприклад, перетворення JSON, обробка таймаутів).
- Axios: надає більш зручний та потужний API для виконання складних запитів.
2. Підтримка JSON:
- Fetch: вимагає явного виклику
response.json()для перетворення тіла відповіді у JSON. - Axios: автоматично перетворює JSON-відповіді.
3. Таймаути:
- Fetch: немає вбудованої підтримки таймаутів. Для реалізації таймауту потрібно використовувати
AbortControllerабо обгортки. - Axios: підтримує налаштування таймаутів через конфігурацію.
4. Перехоплювачі:
- Fetch: не підтримує перехоплювачі запитів і відповідей.
- Axios: дозволяє використовувати перехоплювачі для виконання логіки до і після відправки запиту.
Приклад з перехоплювачами у Axios
Interceptors (перехоплювачі) дозволяють виконувати певні дії до відправки запиту або після отримання відповіді:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// Додавання перехоплювача для запитів
axios.interceptors.request.use(config => {
console.log('Запит відправлено серверу: ', new Date());
return config;
}, error => {
return Promise.reject(error);
});
// Додавання перехоплювача для відповідей
axios.interceptors.response.use(response => {
console.log('Отримано відповідь від сервера: ', new Date());
return response;
}, error => {
return Promise.reject(error);
});
// Приклад запиту з перехоплювачами
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(error => console.error('Помилка під час виконання запиту: ', error));
Паралельні запити з використанням Axios
За допомогою Axios можна легко виконувати паралельні запити і обробляти результати за допомогою Promise.all():
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Promise.all([
axios.get('https://jsonplaceholder.typicode.com/todos/1'),
axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(responses => {
responses.forEach(response => {
console.log(response.data);
});
})
.catch(error => console.error('Помилка під час виконання запиту: ', error));
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ