نحوه ایجاد درخواست Basic Crud در جاوا اسکریپت با استفاده از Fetch API

برای ایجاد یک CRUD (ایجاد، خواندن، بهروزرسانی، حذف) با استفاده از JavaScript Fetch API، میتوانید این مراحل را دنبال کنید:
1 – یک تابع برای درخواست GET برای واکشی داده ها از سرور ایجاد کنید:
function getDados() {
fetch('url-do-servidor')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
}
2 – یک تابع برای ارسال داده ها به سرور با استفاده از درخواست POST ایجاد کنید:
function enviarDados(dados) {
fetch('url-do-servidor', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(dados)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
}
3 – یک تابع برای به روز رسانی داده ها در سرور با استفاده از درخواست PUT ایجاد کنید:
function atualizarDados(id, dados) {
fetch(`url-do-servidor/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(dados)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
}
4 – با استفاده از درخواست DELETE یک تابع برای حذف داده ها در سرور ایجاد کنید:
function deletarDados(id) {
fetch(`url-do-servidor/${id}`, {
method: 'DELETE'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
}
5- از توابع ایجاد شده برای تعامل با سرور استفاده کنید، به عنوان مثال:
// Busca os dados do servidor
getDados()
// Envia novos dados para o servidor
enviarDados({ nome: 'João', idade: 25 })
// Atualiza os dados do servidor com id = 1
atualizarDados(1, { nome: 'Maria', idade: 30 })
// Deleta os dados do servidor com id = 2
deletarDados(2)
به یاد داشته باشید که URL صحیح را برای سرور خود جایگزین “server-url” کنید و عملکردها را با نیازهای خاص پروژه خود تطبیق دهید.
احتمالاً یک خطای مرورگر مربوط به CORS دریافت خواهید کرد، اگر رخ دهد از کتابخانه استفاده کنید: https://github.com/expressjs/cors اگر backend در Node.js ساخته شده است، در غیر این صورت به دنبال راه حل دیگری باشید.