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));
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ