CRUD

1. Введение

crud

CRUD — создание (create), чтение (read), обновление (update) и удаление (delete) - четыре основные метода для взаимодействия с ресурсами REST API.

В REST-архитектуре CRUD соответствует следующим HTTP-методам.

• POST (create) — создать новый ресурс

• GET (read) — получить набор ресурсов или определенный ресурс по идентификатору

• PUT (update) или PATCH (update) — обновить ресурс по идентификатору

• DELETE (delete) — удалить ресурс по идентификатору

Пусть API хранит массив постов, каждый из которых - это объект такого формата.

{
  id: <Integer>,
  author: <String>,
  content: <String>,
}
Copy

В примерах используем JSONPlaceholder, REST API для прототипирования.

2. Создание (create, POST)

Используется, когда необходимо добавить новый ресурс (пост). Функция должна отправить на сервер запрос, в теле которого будет объект с полями author и body. RESTful API, по получению запроса, добавит объекту id и в ответе вернет этот ресурс.

const postToAdd = {
  author: 'Mango',
  content: 'CRUD is awesome',
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify(postToAdd),
  headers: {
    'Content-Type': 'application/json; charset=UTF-8',
  },
})
  .then(response => response.json())
  .then(post => console.log(post))
  .catch(error => console.log(error));
Copy

В ответ, если все хорошо, получим объект с добавленным id. Идентификатор будет уникальным для каждого объекта.

{
  id: 1,
  author: 'Mango',
  content: 'CRUD is awesome',
}
Copy

3. Чтение (read, GET)

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

Делаем запрос на все посты.

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(posts => console.log(posts))
  .catch(error => console.log(error));
Copy

Просим один пост по id, например пост с id=1.

const postId = 1;

fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
  .then(response => response.json())
  .then(post => console.log(post))
  .catch(error => console.log(error));
Copy

4. Обновление (update, PUT и PATCH)

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

const postId = 1;
const postToUpdate = {
  content: 'CRUD is really awesome',
};

fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`, {
  method: 'PATCH',
  body: JSON.stringify(postToUpdate),
  headers: {
    'Content-Type': 'application/json; charset=UTF-8',
  },
})
  .then(response => response.json())
  .then(post => console.log(post))
  .catch(error => console.log('ERROR' + error));
Copy

В ответ, если все хорошо, получим обновленный объект.

{
  id: 1,
  author: 'Mango',
  content: 'CRUD is really awesome',
}
Copy

Метод PATCH заменяет в существующем ресурсе значения переданных в теле запроса свойств. Метод PUT полностью заменяет ресурс.

5. Удаление (delete, DELETE)

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

const postIdToDelete = 1;

fetch(`https://jsonplaceholder.typicode.com/posts/${postIdToDelete}`, {
  method: 'DELETE',
})
  .then(() => console.log('success'))
  .catch(error => console.log('ERROR' + error));