Usando a API fetch do JavaScript para requisições a um back-end (PHP)

A API Fetch fornece uma interface para buscar recursos (incluindo ações entre domínios). Ela fornecerá uma alternativa mais poderosa e flexível aos métodos tradicionais XMLHttpRequest.

Vamos detalhar como usar a API Fetch com diferentes métodos HTTP (GET, POST, PUT, DELETE), que podem ser úteis ao enviar dados para diferentes tipos de back-ends.

Método GET

O método GET é usado para recuperar dados do servidor. É o método básico e o mais simples de ser utilizado, já que não necessita de parâmetros extras.

Ele não deve ser usado quando se trata de dados sensíveis como senhas, pois as informações são visíveis na URL.

fetch('https://meusite.com/api/dados')
.then(response => response.json())
.then(data => {
  // aqui vai seu código do que fazer com o json retornado
  console.log(data)
)
.catch((error) => console.error('Error:', error));

Opcionalmente, se você quiser especificar, seu código pode adicionar o método da requisição:

fetch('https://meusite.com/api/dados', {
  method: 'GET',
})
//.then(...)

Método POST

O método POST é usado para enviar dados para o servidor. Esses dados geralmente serão uma nova inclusão de dados no servidor.

Para fazer requests com o método POST enviando dados ao back-end, é importante considerar como seu back-end trata os dados recebidos e como o pacote de request deve ser formatado.

Por exemplo, considerando o back-end em PHP, podemos acessar os dados de um request POST usando a variável $_POST ou lendo o stream php://input (entre outras formas), conforme os exemplos neste post. Cada uma dessas formas requer um request com formatos levemente diferentes no tocante aos cabeçalhos.

Por exemplo, um request feito usando o código a seguir

let data = {nome: 'Teste', email: '[e-mail]'};

fetch('https://meusite.com/api/dados', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));

vai gerar um pacote HTTP similar ao seguinte:

POST /api/dados HTTP/1.1
Host: meusite.com
Content-Type: application/json
Content-Length: [comprimento dos dados em bytes]

{
  "nome": "Teste",
  "email": "[e-mail]"
}

Com este exemplo, os dados recebidos pelo PHP não serão colocados na variável $_POST, mas estarão disponíveis no stream php://input.

Já um código JavaScript como esse:

let formData = new FormData();

formData.append('nome', 'Teste');
formData.append('email', '[e-mail]');

fetch('https://meusite.com/api/dados', {
  method: 'POST',
  body: formData,
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));

resultará em um pacote HTTP similar a

POST /api/dados HTTP/1.1
Host: meusite.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryyrV7KO0BoDjzQx2K
Content-Length: [comprimento dos dados em bytes]

------WebKitFormBoundaryyrV7KO0BoDjzQx2K
Content-Disposition: form-data; name="nome"

Teste
------WebKitFormBoundaryyrV7KO0BoDjzQx2K
Content-Disposition: form-data; name="email"

[e-mail]
------WebKitFormBoundaryyrV7KO0BoDjzQx2K--

Isso acontece porque quando você envia uma requisição HTTP usando o fetch do JavaScript com o objeto FormData, o navegador gera automaticamente o cabeçalho 'Content-Type' com o valor 'multipart/form-data', seguido por um 'boundary'. O 'boundary' é um tipo de delimitador usado para separar diferentes partes de dados no corpo da mensagem.

Nesse caso, os dados enviados neste pacote ficam disponíveis na variável $_POST do PHP (e também em $_FILES quando se trata de upload de arquivos).

Métodos PUT e DELETE

O método PUT é usado para atualizar uma informação existente no servidor; já o método DELETE é usado para remover uma informação existente no servidor.

Em ambos os casos, quando o back-end está em PHP, o mais comum é fazer requests usando o Content-Type: application/json, já que não existem variáveis superglobais para lidar com dados passados nestes tipos de requests. Assim, os códigos são similares aos seguintes:

let data = {nome: 'Teste atualizado', email: '[e-mail]'};

fetch('https://meusite.com/api/dados/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));

fetch('https://meusite.com/api/dados/1', {
  method: 'DELETE',
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));