JavaScript Academy · Урок

POST и отправка данных

Отправляйте данные JSON с параметрами запроса.

«POST и отправка данных» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Отправка данных на сервер

Чтобы создать или обновить данные, отправьте запрос с телом. Fetch поддерживает это через объект параметров, передаваемый вторым аргументом.

Настройка метода

Установите для method нужный HTTP-метод: POST — для создания, PUT/PATCH — для обновления, DELETE — для удаления.

fetch(url, { method: "POST" });

Добавление тела JSON

Большинство API ожидают JSON. Преобразуйте объект в строку с помощью JSON.stringify и поместите результат в body.

fetch(url, {
  method: "POST",
  body: JSON.stringify({ name: "Ada", age: 36 })
});

Заголовок Content-Type

Сообщите серверу, что тело содержит JSON, задав Content-Type: application/json. Без этого сервер может неправильно интерпретировать переданные данные.

fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Ada" })
});

Чтение ответа

Обычно сервер отвечает созданным ресурсом. Прочитайте его так же, как ответ GET-запроса, с помощью response.json().

const response = await fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(payload)
});
const created = await response.json();

Полная функция создания

Объедините этот шаблон в повторно используемую функцию. Она принимает данные, отправляет их и возвращает ответ сервера.

async function createUser(data) {
  const res = await fetch("/api/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  return res.json();
}

PUT и PATCH

Используйте PUT, чтобы полностью заменить ресурс, а PATCH — чтобы обновить только некоторые поля. Поэтому структура тела запроса будет различаться.

fetch("/api/users/7", {
  method: "PATCH",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ age: 37 })
});

Отправка данных формы

Для загрузки файлов или отправки форм используйте объект FormData в качестве тела запроса. Не устанавливайте Content-Type самостоятельно: браузер добавит правильную границу multipart.

const form = new FormData();
form.append("avatar", fileInput.files[0]);
fetch("/upload", { method: "POST", body: form });

Аутентификация

Для защищённых конечных точек нужны учётные данные. Передайте токен в заголовке Authorization вместе с Content-Type.

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer " + token
  },
  body: JSON.stringify(data)
});

Файлы cookie и учётные данные

По умолчанию fetch не отправляет файлы cookie между источниками. Установите credentials: "include", если сервер использует сеансы на основе файлов cookie.

fetch(url, { method: "POST", credentials: "include", body: payload });

Ошибки при преобразовании в строку

Помните: body должно быть строкой (или объектом FormData/Blob). Передача исходного объекта отправляет значение [object Object]. Всегда сначала применяйте JSON.stringify к объектам.

body: JSON.stringify({ ok: true }) // correct
// body: { ok: true }  <-- broken

Быстрая проверка

Отправка JSON с помощью POST.

Повторение

Отправляйте данные, задавая method, body и заголовки. Для JSON примените к объекту JSON.stringify и установите Content-Type: application/json. Для загрузки файлов используйте FormData (не задавайте Content-Type вручную), для аутентификации добавьте Authorization, а для файлов cookie — credentials: "include". Прочитайте ответ с помощью response.json().

Часто задаваемые вопросы

Урок «POST и отправка данных» бесплатный?

Да — полный текст урока «POST и отправка данных» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «POST и отправка данных»?

Отправляйте данные JSON с параметрами запроса. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «POST и отправка данных»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy