логотип PurpleSchool
логотип PurpleSchool

fetch() в JavaScript

Автор

Дмитрий Фандорин

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

Коротко

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

Форма записи и описание работы

Fetch API используется с помощью функции fetch(), которая принимает URL-адрес и объект параметров. Этот объект может содержать различные параметры, такие как метод запроса, заголовки, тело запроса и т.д.

Пример:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Мой пост',
    body: 'Текст поста',
    userId: 1
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));

Fetch API также позволяет использовать Cookies для хранения данных аутентификации и сеанса. Для этого нужно установить параметр credentials в значение 'include'.

Пример:

fetch('https://example.com', {
  credentials: 'include'
})
.then(response => console.log(response))
.catch(err => console.error(err));

Обработка ошибок в Fetch API осуществляется с помощью метода catch(). Он вызывается, когда происходит ошибка в запросе или ответе. В методе catch() можно обработать ошибку и выполнить соответствующие действия.

Пример:

fetch('https://example.com')
.then(response => {
  if (!response.ok) {
    throw new Error('Ошибка запроса');
  }
  return response.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));

Заключение

Fetch API предоставляет простой и гибкий способ работы с сетевыми запросами и ответами. Он используется с помощью функции fetch(), которая принимает URL-адрес и объект параметров. Fetch API также позволяет использовать Cookies для хранения данных аутентификации и сеанса, а также обрабатывать ошибки с помощью метода catch().

Стрелочка влевоFormData в JavaScriptDOM в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний