6.1 Introduzione a CRUD
CRUD è un acronimo che indica le quattro operazioni principali che puoi fare con i dati: creazione (Create), lettura (Read), aggiornamento (Update) e eliminazione (Delete). Queste operazioni sono fondamentali per lavorare con i database e sono la base della maggior parte delle applicazioni web.
Che cosa è CRUD?
- Create (Creazione): l'operazione di creazione è usata per aggiungere nuovi record al database. Questo consente di inserire nuovi dati nel sistema.
- Read (Lettura): l'operazione di lettura è usata per estrarre dati dal database. Questo consente agli utenti di richiedere e visualizzare le informazioni esistenti.
- Update (Aggiornamento): l'operazione di aggiornamento è usata per modificare i record esistenti nel database. Questo consente di modificare e correggere i dati.
- Delete (Eliminazione): l'operazione di eliminazione è usata per rimuovere i record dal database. Questo consente di eliminare dati non necessari o obsoleti.
Metodi HTTP per CRUD
Nel contesto dello sviluppo web, le operazioni CRUD sono spesso eseguite usando richieste HTTP verso API. Diversi metodi HTTP corrispondono a diverse operazioni CRUD:
- POST: usato per creare nuove risorse.
- GET: usato per leggere (ottenere) le risorse.
- PUT e PATCH: usati per aggiornare risorse esistenti. PUT è solitamente usato per sostituire completamente una risorsa, mentre PATCH per aggiornamenti parziali.
- DELETE: usato per eliminare risorse.
Perché sono necessarie le operazioni CRUD?
Le operazioni CRUD sono la base per lavorare con i dati nelle applicazioni web. Permettono agli sviluppatori di implementare funzionalità di base, come la creazione di account utente, la modifica dei profili, la visualizzazione dei dati e l'eliminazione dei record. Queste operazioni facilitano anche l'interazione tra client e server, permettendo di trasmettere dati e comandi.
Strumenti moderni per eseguire operazioni CRUD
Le applicazioni web moderne spesso usano diversi strumenti e librerie per eseguire operazioni CRUD tramite API:
- Fetch API: un modo integrato nel browser per effettuare richieste HTTP, basato su promise.
- Axios: una libreria popolare per effettuare richieste HTTP, che fornisce un API comodo e avanzato.
Questi strumenti aiutano gli sviluppatori a eseguire facilmente ed efficacemente operazioni CRUD, garantendo flessibilità e semplicità nell'integrazione con diverse API server.
6.2 Uso di Fetch
Vediamo come utilizzare Fetch per eseguire operazioni CRUD.
Creazione (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('Created:', result);
};
createData({ title: 'foo', body: 'bar', userId: 1 });
Lettura (Read):
const readData = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
const result = await response.json();
console.log('Read:', result);
};
readData(1);
Aggiornamento (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('Updated:', result);
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
Eliminazione (Delete):
const deleteData = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: 'DELETE'
});
if (response.ok) {
console.log('Deleted:', id);
} else {
console.error('Failed to delete:', id);
}
};
deleteData(1);
6.3 Uso di Axios
Vediamo come utilizzare Axios per eseguire operazioni CRUD.
Creazione (Create):
const axios = require('axios');
const createData = async (data) => {
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/posts', data);
console.log('Created:', response.data);
} catch (error) {
console.error('Error creating data:', error);
}
};
createData({ title: 'foo', body: 'bar', userId: 1 });
Lettura (Read):
const readData = async (id) => {
try {
const response = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`);
console.log('Read:', response.data);
} catch (error) {
console.error('Error reading data:', error);
}
};
readData(1);
Aggiornamento (Update):
const updateData = async (id, data) => {
try {
const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, data);
console.log('Updated:', response.data);
} catch (error) {
console.error('Error updating data:', error);
}
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
Eliminazione (Delete):
const deleteData = async (id) => {
try {
const response = await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
if (response.status === 200) {
console.log('Deleted:', id);
}
} catch (error) {
console.error('Error deleting data:', error);
}
};
deleteData(1);
6.4 Consigli per l'uso di CRUD
Consigli per l'uso delle operazioni CRUD tramite API:
- Gestione degli errori: gestisci sempre i possibili errori durante le richieste HTTP. Usa blocchi
try...catch
o metodicatch
per gestire gli errori. - Validazione dei dati: prima di inviare i dati al server, assicurati che rispettino il formato atteso.
- Autenticazione e autorizzazione: quando lavori con risorse protette, assicurati che l'autenticazione e l'autorizzazione siano gestite correttamente, ad esempio aggiungendo token di accesso negli header delle richieste.
- Paginazione e filtraggio: quando ricevi grandi quantità di dati, usa i parametri di richiesta per la paginazione e il filtraggio dei dati.
- Caching: per migliorare le performance, puoi memorizzare nella cache i dati richiesti frequentemente.
GO TO FULL VERSION