CRUD операції

6.1 Вступ до CRUD

CRUD — це акронім, який позначає чотири основні операції, які можна виконувати з даними: створення (Create), читання (Read), оновлення (Update) і видалення (Delete). Ці операції є фундаментальними для роботи з базами даних і є основою більшості веб-застосунків.

Що таке CRUD?

• Create (Створення): операція створення використовується для додавання нових записів у базу даних. Це дозволяє вводити нові дані в систему.
• Read (Читання): операція читання використовується для отримання даних із бази даних. Це дозволяє користувачам запитувати й переглядати існуючу інформацію.
• Update (Оновлення): операція оновлення використовується для зміни існуючих записів у базі даних. Це дозволяє редагувати й коригувати дані.
• Delete (Видалення): операція видалення використовується для видалення записів із бази даних. Це дозволяє видаляти непотрібні або застарілі дані.

HTTP-методи для CRUD операцій

У контексті веб-розробки CRUD операції часто виконуються з використанням HTTP-запитів до API. Різні методи HTTP відповідають різним CRUD операціям:

• POST: використовується для створення нових ресурсів.
• GET: використовується для читання (отримання) ресурсів.
• PUT і PATCH: використовуються для оновлення існуючих ресурсів. PUT зазвичай використовується для повної заміни ресурсу, тоді як PATCH — для часткового оновлення.
• DELETE: використовується для видалення ресурсів.

Навіщо потрібні CRUD операції?

CRUD операції є основою для роботи з даними у веб-застосунках. Вони дозволяють розробникам реалізовувати основну функціональність, таку як створення облікових записів користувачів, редагування профілів, перегляд даних і видалення записів. Ці операції також забезпечують взаємодію між клієнтом і сервером, дозволяючи передавати дані й команди.

Сучасні інструменти для виконання CRUD операцій

Сучасні веб-застосунки часто використовують різні інструменти й бібліотеки для виконання CRUD операцій через API:

• Fetch API: вбудований у браузер спосіб виконання HTTP-запитів, заснований на промісах.
• Axios: популярна бібліотека для виконання HTTP-запитів, яка надає зручний і розширений API.

Ці інструменти допомагають розробникам легко та ефективно виконувати CRUD операції, забезпечуючи гнучкість і простоту інтеграції з різними серверними API.

6.2 Використання Fetch

Розглянемо використання Fetch для виконання CRUD операцій.

Створення (Create):

    
      const createData = async (data) => {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        });
        const result = await response.json();
        console.log('Створено:', result);
      };

      createData({ title: 'foo', body: 'bar', userId: 1 });
    
  

Читання (Read):

    
      const readData = async (id) => {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
        const result = await response.json();
        console.log('Прочитано:', result);
      };

      readData(1);
    
  

Оновлення (Update):

    
      const updateData = async (id, data) => {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        });
        const result = await response.json();
        console.log('Оновлено:', result);
      };

      updateData(1, { title: 'foo', body: 'bar', userId: 1 });
    
  

Видалення (Delete):

    
      const deleteData = async (id) => {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
          method: 'DELETE'
        });
        if (response.ok) {
          console.log('Видалено:', id);
        } else {
          console.error('Не вдалося видалити:', id);
        }
      };

      deleteData(1);
    
  

6.3 Використання Axios

Розглянемо використання Axios для виконання CRUD операцій.

Створення (Create):

    
      const axios = require('axios');

      const createData = async (data) => {
        try {
          const response = await axios.post('https://jsonplaceholder.typicode.com/posts', data);
          console.log('Створено:', response.data);
        } catch (error) {
          console.error('Помилка створення даних:', error);
        }
      };

      createData({ title: 'foo', body: 'bar', userId: 1 });
    
  

Читання (Read):

    
      const readData = async (id) => {
        try {
          const response = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`);
          console.log('Прочитано:', response.data);
        } catch (error) {
          console.error('Помилка читання даних:', error);
        }
      };

      readData(1);
    
  

Оновлення (Update):

    
      const updateData = async (id, data) => {
        try {
          const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, data);
          console.log('Оновлено:', response.data);
        } catch (error) {
          console.error('Помилка оновлення даних:', error);
        }
      };

      updateData(1, { title: 'foo', body: 'bar', userId: 1 });
    
  

Видалення (Delete):

    
      const deleteData = async (id) => {
        try {
          const response = await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
          if (response.status === 200) {
            console.log('Видалено:', id);
          }
        } catch (error) {
          console.error('Помилка видалення даних:', error);
        }
      };

      deleteData(1);
    
  

6.4 Поради щодо використання CRUD

Поради щодо використання CRUD операцій через API:

1. Обробка помилок: завжди обробляйте можливі помилки під час виконання HTTP-запитів. Використовуйте блоки try...catch або методи catch для обробки помилок.
2. Валідація даних: перед надсиланням даних на сервер переконайтеся, що вони відповідають очікуваному формату.
3. Аутентифікація та авторизація: при роботі із захищеними ресурсами переконайтеся, що ви правильно обробляєте аутентифікацію та авторизацію, наприклад, додаючи токени доступу в заголовки запитів.
4. Пагінація і фільтрація: під час отримання великих обсягів даних використовуйте параметри запиту для пагінації й фільтрації даних.
5. Кешування: для покращення продуктивності можна кешувати часто запитувані дані.