برنامه نویسی

نحوه ایجاد درخواست 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 ساخته شده است، در غیر این صورت به دنبال راه حل دیگری باشید.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا