Configurando Requisições e Enviando Dados com Fetch em JavaScript

A função fetch() pode aceitar opções adicionais de requisição como segundo parâmetro opcional:

fetch(resource [, init])

O parâmetro init é um objeto que pode conter um grande conjunto de opções:

• method: Método da requisição, como GET, POST, PUT, etc.
• headers: Cabeçalhos definidos na requisição
• body: Corpo da requisição, contendo os dados adicionados à requisição.
• mode: Modo da requisição, como cors, no-cors e same-origin.

• credentials: Define o tratamento das credenciais (cookies, dados de autenticação HTTP e certificados de cliente TLS). Pode ter um dos seguintes valores:

  • omit: As credenciais são excluídas da requisição e quaisquer credenciais enviadas na resposta do servidor são ignoradas.
  • same-origin: As credenciais são incluídas apenas em requisições e respostas cujo endereço pertence ao mesmo domínio do cliente.
  • include: As credenciais são incluídas em todas as requisições e aceitas em todas as respostas.
• cache: Define o comportamento de interação com o cache do navegador. Valores possíveis: default, no-store, reload, no-cache, force-cache e only-if-cached.

• redirect: Define como reagir a redirecionamentos. Pode ter os seguintes valores:

  • follow: Aplicar redirecionamentos automaticamente.
  • error: Lançar erro em caso de redirecionamento.
  • manual: Processar a resposta em outro contexto.
• referrer: Define o referenciador da requisição.
• referrerPolicy: Define a política de referenciador, ou seja, como as informações sobre o referenciador serão passadas na requisição. Valores possíveis: no-referrer, no-referrer-when-downgrade, same-origin, origin, strict-origin, origin-when-cross-origin, strict-origin-when-cross-origin e unsafe-url.
• integrity: Contém o valor de integridade do recurso.
• keepalive: Permite que a requisição exista por mais tempo que o tempo de vida da página web.
• signal: Fornece um objeto AbortSignal e permite cancelar a execução da requisição.

Vamos ver um exemplo de configurações de requisição:

fetch("/user", {
  method: "GET",
  headers: { Accept: "application/json" },
})
  .then((response) => response.json())
  .then((user) => console.log(user));

Nesse exemplo, definimos o método da requisição como "GET" e o cabeçalho "Accept" com o valor "application/json", indicando que o cliente aceita dados no formato JSON.

Vale notar que a propriedade headers representa um objeto Headers. Podemos usar métodos desse objeto para definir cabeçalhos:

const myHeaders = new Headers();
myHeaders.append("Accept", "application/json");
fetch("/user", {
  method: "GET",
  headers: myHeaders,
})
  .then((response) => response.json())
  .then((user) => console.log(user));

O método append() adiciona um cabeçalho específico, cujo nome é passado como primeiro parâmetro e o valor do cabeçalho como segundo parâmetro.

Também podemos usar o método set() para definir um cabeçalho, substituindo seu valor caso já tenha sido adicionado. Para remover um cabeçalho previamente adicionado, usamos o método delete(), que recebe o nome do cabeçalho a ser removido:

const myHeaders = new Headers();
myHeaders.append("Accept", "application/json"); // Adiciona o cabeçalho Accept
myHeaders.set("Accept", "text/xml"); // Altera o valor do cabeçalho
myHeaders.delete("Accept"); // Remove o cabeçalho

Enviando Dados na Requisição

Para enviar dados na requisição com a função fetch(), usamos a opção body no segundo parâmetro. Esses dados podem ser dos tipos Blob, BufferSource, FormData, URLSearchParams, USVString e ReadableStream. É importante notar que em requisições com métodos GET e HEAD, não é possível definir essa opção.

Para testar o envio de dados, vamos definir um servidor simples em Node.js que recebe dados:

const http = require("http");
const fs = require("fs");

http
  .createServer(async (request, response) => {
    if (request.url == "/user") {
      const buffer = []; // buffer para os dados recebidos

      // recebendo dados da requisição no buffer
      for await (const chunk of request) {
        buffer.push(chunk);
      }
      // obtendo a representação em string dos dados
      let userName = Buffer.concat(buffer).toString();
      userName = userName + " Smith";
      response.end(userName);
    } else {
      fs.readFile("index.html", (error, data) => response.end(data));
    }
  })
  .listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Nesse caso, ao acessar o endereço "/user", o servidor recebe todos os dados enviados. O objeto de requisição fornece um iterador para extrair os dados, que são passados para um array buffer:

for await (const chunk of request) {
  buffer.push(chunk);
}

Em seguida, usamos o método Buffer.concat() para unir todos os dados recebidos e formar uma string:

let userName = Buffer.concat(buffers).toString();

Neste exemplo, assumimos que uma simples string de texto é enviada para o servidor, representando um nome de usuário. Para fins de exemplo, adicionamos um sobrenome ao nome e o enviamos de volta ao cliente:

userName = userName + " Smith";
response.end(userName);

Agora, definimos o código na página index.html para enviar dados a esse servidor:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <script>
      fetch("/user", } method: "POST", body: "Tom" {)
          .then(response => response.text())
          .then(userName => console.log(userName));
    </script>
  </body>
</html>

Utilizamos o método POST para enviar dados. Neste caso, enviamos uma simples string "Tom". Assim, enviamos um texto simples. Como o servidor também envia texto em resposta, usamos o método response.text() para obter a resposta. Ao executar essa página web, os dados são enviados ao servidor, e podemos ver a resposta do servidor no console do navegador:

Enviando JSON

De maneira similar, podemos enviar dados mais complexos em formato JSON. Por exemplo, vejamos como enviar JSON. No lado do servidor em Node.js, definimos o seguinte servidor:

const http = require("http");
const fs = require("fs");

http
  .createServer(async (request, response) => {
    if (request.url == "/user") {
      const buffers = [];
      for await (const chunk of request) {
        buffers.push(chunk);
      }

      const data = Buffer.concat(buffers).toString();
      const user = JSON.parse(data); // parse da string para JSON

      // alterando os dados do objeto recebido
      user.name = user.name + " Smith";
      user.age += 1;
      // enviando o objeto alterado de volta ao cliente
      response.end(JSON.stringify(user));
    } else {
      fs.readFile("index.html", (error, data) => response.end(data));
    }
  })
  .listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Neste exemplo, esperamos que o servidor receba um objeto no formato JSON contendo duas propriedades: name e age. O servidor altera os valores dessas propriedades e envia o objeto modificado de volta ao cliente.

Na página web, configuramos um objeto JSON para envio e obtemos os dados de volta usando o método response.json():

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <script>
      fetch("/user", {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: "Tom",
          age: 37,
        }),
      })
        .then((response) => response.json())
        .then((user) => console.log(user.name, "-", user.age));
    </script>
  </body>
</html>