如何使用Fetch API在JavaScript中创建CRUD要求
#javascript #api #fetch #crud

使用JavaScript fetch API创建一个CRUD(创建,读取,更新,删除),您可以按照以下步骤进行操作:

1-创建一个函数以提出获取服务器数据的请求:

function getDados() {
  fetch('url-do-servidor')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error))
}

2-创建一个函数,使用帖子将数据发送到服务器:

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-创建一个函数,使用删除请求删除服务器上的数据:

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替换“ URL-Dor-Servidor”并调整功能以满足您项目的特定需求。

图像:Unsplash