←Чтение и запись файлов

Fetch API

#example

Конечно, ниже приведены несколько простых практических примеров, демонстрирующих использование 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

#description

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

Если вам не совсем понятен какой-то абзац текста из лекции, просто нажмите на него и сможете задать уточняющие вопросы по нему.

Если же непонятен весь вопрос, то нажмите на кнопки внизу, чтобы получить новый вариант объяснения, практические примеры или критически оценить сам вопрос.

Developer learning path

Чтение и запись файлов в JavaScript

Fetch API