Чтение и запись файлов в JavaScript
Fetch API
84
Конечно, ниже приведены несколько простых практических примеров, демонстрирующих использование Fetch API в JavaScript.
- Получение данных в формате JSON с сервера:
fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
- Отправка данных на сервер в формате JSON:
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('https://picsum.photos/200/300') .then(response => response.blob()) .then(imageBlob => { const imageUrl = URL.createObjectURL(imageBlob); const img = document.createElement('img'); img.src = imageUrl; document.body.appendChild(img); }) .catch(error => console.error(error));
- Отправка формы на сервер с использованием FormData:
const form = document.querySelector('form'); form.addEventListener('submit', event => { event.preventDefault(); const formData = new FormData(form); fetch(form.action, { method: form.method, body: formData }) .then(response => response.text()) .then(responseText => console.log(responseText)) .catch(error => console.error(error)); });
Это лишь некоторые примеры использования Fetch API. Библиотека асинхронной передачи данных только начинает свой путь и совсем скоро станет главным инструментом для получения и отправки данных в JavaScript.
March 28, 2023
81
Fetch API – это новый стандарт для работы с HTTP запросами, предоставляющий удобный и простой интерфейс для получения и отправки данных на сервер. Он основан на промисах, что позволяет организовывать асинхронные запросы и обработку ответов без использования колбэков.
Основные возможности Fetch API:
- Работа с запросами HTTP и HTTPS
- Передача заголовков и параметров запроса
- Работа с куками и авторизация
- Обработка форматов данных, таких как JSON, XML, FormData и других
- Управление таймаутами
Пример использования Fetch API для получения данных в формате JSON:
fetch('https://example.com/data.json') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error))
В этом примере мы отправляем GET запрос на сервер, чтобы получить данные в формате JSON. Затем мы обрабатываем ответ с помощью метода json(), который преобразует ответ в объект JavaScript.
Fetch API является мощным инструментом для работы с сетевыми запросами и может использоваться вместо старых технологий, таких как XMLHttpRequest (XHR). Он поддерживается всеми основными браузерами и предоставляет простой и гибкий интерфейс для взаимодействия с сервером.
March 29, 2023