CRUD – Create, Read, Update, Delete
Das sind die typischen Aufgaben von fetch im REST-API: Daten mit GET auslesen, mit POST Daten zum Server senden, mit PUT Daten ändern und mit DELETE löschen. Die Daten werden z.B. von einer PHP-Anwendung aus einer Datenbank bereitgestellt und immer häufiger als JSON zwischen Client und Server ausgetauscht. Mit fetch POST, PUT und DELETE wird kein Query-String für die Anfragen gebraucht, sondern die Daten werden im Body der Anfrage übermittelt.
GET-Request
Die einfachste Anfrage nach Informationen aus der Serveranwendung ist der GET-Request. Der fetch-Request braucht nur einen Parameter: die URL der Anwendung.
<button id="getPostsBtn">Alle Autoren auslesen</button>
getPostBtn.addEventListener("click", () => {
fetch (url).then (function (response) {
return response.json();
}).then (function (data) {
appendData(data);
}).catch (function (error) {
console.log ("error: " + error);
});
});
UPDATE mit Fetch PUT
Um nur bestimmte Daten – z.B. in diesem Beispiel nur einen Datensatz – auszulesen, kann ebenfalls ein GET-Request verwendet werden. GET-Requests ändern Daten nicht. Um Daten gezielt zu verändern oder zu überschreiben, wird ein PUT-Request eingesetzt.
<input id="num" type="number"> <button id="getPostBtn">Einen Autor auslesen</button> <input id="newFirstname" type="text"> <input id="newLastname" type="text"> <button id="updatePost">Bearbeitung speichern</button>
Das Update besteht aus zwei Teilen: Ein GET-Request holt ein individuelles Element mit der ID des Elements in der URL.
getPostBtn.addEventListener("click", () => {
fetch (`${url}${num.value}`).then (function(response) {
return response.json();
}).then (function(data) {
document.querySelector("#upFirstname").value = data.firstname;
document.querySelector("#upLastname").value = data.lastname;
appendSingle(data);
}).catch (function (error) {
console.log("error: " + error)
});
});
PUT überträgt im zweiten Teil den individuellen Datensatz an den Server. Die Alternative wäre PATCH, um nur Teile des Datensatzes effizienter zur Anwendung zu transportieren.
updatePost.addEventListener("click", () => {
fetch(url, {
method: "PUT",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: parseInt(document.querySelector("#num").value),
firstname: document.querySelector("#upFirstname").value,
lastname: document.querySelector("#upLastname").value
})
})
.then(response => response.json())
.then (data => {
console.log("update", data);
append(data);
})
.catch(error => console.log("Error:" , error))
})
POST – neues Element erzeugen
POST wird genauso wie PUT im Header des Requests aufgeführt. Die Daten des neuen Elements sitzen im body. Eine ID wird i.d.R. von der Anwendung auf dem Server bzw. beim Eintrag in die Datenbank erzeugt und nicht vom Client.
<input id="firstname" type="text"> <input id="lastname" type="text"> <button id="newPost">Neuer Autor</button>
newPost.addEventListener("click", () => {
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
firstname: document.querySelector("#firstname").value,
lastname: document.querySelector("#lastname").value
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => console.error('Error:', error));
});
DELETE – Element löschen
Für das Löschen eines Datensatzes wird nur seine ID benötigt.
<input id="del" type="number"> <button id="delPost">Autor löschen</button>
delPost.addEventListener("click", () => {
fetch(url, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: document.querySelector("#del").value,
})
})
.then(response => {
if (response.ok) {
console.log('Datensatz erfolgreich gelöscht');
} else {
console.error('Fehler beim Löschen des Datensatzes');
}
})
.catch(error => console.error('Error:', error));
})
