Javascript Fetch: учимся работать с сетью

JavaScript Fetch - это современный API, который используется для получения данных с сервера и отправки запросов на сервер. Он предоставляет более простой и чистый способ взаимодействия между клиентом и сервером, чем традиционный XMLHttpRequest.

Особенности JavaScript Fetch API:

1. Промисы: Fetch возвращает промис, что облегчает обработку асинхронных запросов.

2. Глобальный метод: Fetch доступен глобально, что означает, что он может быть использован как в браузере, так и на сервере средствами Node.js.

3. Простота использования: API Fetch предоставляет простой интерфейс и простые методы для получения данных с сервера.

Примеры:

GET запрос:

fetch('https://jsonplaceholder.typicode.com/todos/1')

.then(response => response.json())

.then(data => console.log(data))

.catch(e => console.log("Error:", e));

В примере выше мы отправляем GET-запрос на сервер https://jsonplaceholder.typicode.com/todos/1, который возвращает данные в формате JSON. Затем мы обрабатываем ответ с помощью метода json() и получаем JSON-объект. И наконец, мы выводим полученные данные в консоль.

POST запрос:

fetch('https://jsonplaceholder.typicode.com/posts', {

method: 'POST',

body: JSON.stringify({

title: 'foo',

body: 'bar',

userId: 1

}),

headers: {

'Content-type': 'application/json; charset=UTF-8',

},

})

.then((response) => response.json())

.then((json) => console.log(json))

.catch(e => console.log("Error:", e));

Здесь мы отправляем POST-запрос на сервер с заголовком 'Content-type': 'application/json; charset=UTF-8'. Также мы передаем тело запроса в формате JSON. Затем мы обрабатываем ответ и выводим его в консоль.

JavaScript Fetch API позволяет получать данные с сервера и отправлять запросы на сервер. Он является более простым и чистым способом взаимодействия между клиентом и сервером в сравнении с традиционным XMLHttpRequest.