Na lição anterior, vimos o que é a API Fetch e como usá-la. Nesta lição, vamos discutir os métodos HTTP GET, POST, PUT e DELETE da API Fetch. Vamos começar com o método HTTP mais comum, que é o método GET. Ele é usado para recuperar dados de um servidor. Quando você usa fetch() sem especificar um método, ele assume o padrão GET.

fetch('https://api.example.com/data')

Neste código, estamos fazendo uma requisição GET para https://api.example.com/data. Agora, note que você não pode usar esses dados diretamente; é preciso converter a resposta para o formato JSON. Só então você pode usá-la onde quiser no seu projeto. Aqui está um exemplo de como fazer isso:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))

Neste código, a resposta que vem da API Fetch é uma promise, e estamos usando um manipulador .then para converter a resposta para o formato JSON. Em uma lição anterior, você aprendeu que uma Promise é um objeto que representa a conclusão eventual (ou falha) de um processo assíncrono e seu valor. O valor de uma promise não é conhecido quando ela é criada. Só é conhecido quando o processo assíncrono é concluído. Quando encadeamos os dois manipuladores .then na chamada fetch, isso é algo chamado encadeamento de promise, que será ensinado na próxima lição. Até agora, temos recuperado recursos de um servidor. Mas você sabia que também podemos enviar dados para o servidor? O método POST é usado para enviar dados a um servidor para criar um recurso. Aqui está um exemplo do método POST, que é usado para criar um recurso no servidor:

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john@example.com'
  })
})

Neste exemplo, estamos enviando uma requisição POST para criar um novo usuário. Especificamos o método como POST, definimos os cabeçalhos apropriados e incluímos um body com os dados que queremos enviar. O corpo precisa ser uma string, então usamos JSON.stringify() para converter nosso objeto em uma string JSON. O método PUT é usado para atualizar recursos existentes de um servidor. Aqui está um exemplo:

fetch('https://api.example.com/users/45', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John Smith',
    email: 'john@example.com'
  })
})

Neste exemplo, observe cuidadosamente a URL, você pode ver um 45 no final. Isso é tipicamente usado como um ID único para identificar os dados que estamos tentando atualizar. Usamos o método PUT no código e também especificamos os dados como o body que será usado para atualizar os dados identificados. O método DELETE é usado para excluir um recurso do servidor. Aqui está um exemplo:

fetch('https://api.example.com/users/45', {
  method: 'DELETE',
})

Neste código, estamos incluindo o método DELETE e um ID no final da URL para identificar os dados que precisam ser excluídos.