Курс по программированию на JavaScript

Урок 24: Fetch API

Fetch API — это современный интерфейс для выполнения HTTP-запросов в веб-приложениях. Он предоставляет простой и гибкий способ взаимодействия с сервером, заменяя устаревший объект XMLHttpRequest. В этом уроке мы рассмотрим основы Fetch API и приведем примеры его использования.

Основы Fetch API

Fetch API используется для выполнения асинхронных запросов к серверу. Он возвращает обещание (promise), которое разрешается, когда сервер отвечает на запрос. Это делает код более читаемым и управляемым.

Простой пример использования Fetch API

Рассмотрим пример выполнения GET-запроса с использованием Fetch API.

// Выполнение GET-запроса с использованием Fetch API
fetch('https://jsonplaceholder.typicode.com/posts')
 .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error('Ошибка:', error));

// Ответ сервера будет выведен в консоль

В этом примере мы выполняем GET-запрос к API и обрабатываем ответ, преобразуя его в формат JSON и выводя в консоль.

Пример выполнения POST-запроса

Рассмотрим пример выполнения POST-запроса с отправкой данных на сервер.

// Выполнение POST-запроса с использованием Fetch API
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));

// Ответ сервера будет выведен в консоль

В этом примере мы выполняем POST-запрос, отправляя данные в формате JSON и обрабатывая ответ сервера.

Обработка ошибок

Fetch API не выбрасывает исключение при HTTP-ошибках (например, 404 или 500). Вместо этого запрос считается успешным, если сервер отвечает. Ошибки следует обрабатывать вручную, проверяя свойство ok объекта ответа.

// Обработка ошибок с использованием Fetch API
fetch('https://jsonplaceholder.typicode.com/posts/1')
 .then(response => {
 if (!response.ok) {
 throw new Error('Сетевая ошибка: ' + response.status);
 }
 return response.json();
 })
 .then(data => console.log(data))
 .catch(error => console.error('Ошибка:', error));

// Ошибка будет обработана и выведена в консоль

В этом примере мы проверяем свойство ok объекта ответа и выбрасываем ошибку при необходимости.

Упражнения

// HTML
<button id="loadData">Load Data</button>

// JavaScript
document.getElementById('loadData').addEventListener('click', function() {
 fetch('https://jsonplaceholder.typicode.com/users')
 .then(response => response.json())
 .then(data => {
 data.forEach(user => {
 console.log(user.name);
 });
 })
 .catch(error => console.error('Ошибка:', error));
});

// Имена пользователей будут выведены в консоль

// HTML
<form id="postForm">
 <input type="text" id="title" placeholder="Title">
 <button type="submit">Submit</button>
</form>

// JavaScript
document.getElementById('postForm').addEventListener('submit', function(event) {
 event.preventDefault();
 let title = document.getElementById('title').value;
 fetch('https://jsonplaceholder.typicode.com/posts', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify({ title: title, body: 'bar', userId: 1 })
 })
 .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error('Ошибка:', error));
});

// Ответ сервера будет выведен в консоль