Configurando Parâmetros de Requisição e Enviando Dados - 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 complexo 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:

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>