Response na Fetch API: Como Ler Status, Cabeçalhos e Redirecionamentos em JavaScript

Para representar a resposta do servidor no Fetch API, usamos a interface Response. A função fetch() retorna um objeto Promise, cujo callback recebe um objeto Response com a resposta do servidor:

fetch("/hello").then(response => /* ações com response */ )

Como alternativa, podemos usar async/await para obter o objeto Response:

async function getText() {
  // obter o objeto resposta
  const response = await fetch("http://localhost:3000/hello");
  // ações com o objeto response .......
}

Usando as propriedades do objeto Response, podemos obter várias informações da resposta recebida. O objeto Response possui as seguintes propriedades:

body: conteúdo da resposta como um objeto ReadableStream.
bodyUsed: valor booleano indicando se o conteúdo da resposta já foi usado.
headers: conjunto de cabeçalhos da resposta como um objeto Headers.
ok: valor booleano indicando se a solicitação foi bem-sucedida (código de status entre 200 e 299).
redirected: valor booleano indicando se a resposta é resultado de uma redireção.
status: código de status da resposta.
statusText: mensagem de status correspondente ao código de status.
type: tipo de resposta.
url: URL do endereço. Se houver redirecionamentos, armazena o URL final após todas as redireções.

É importante notar que todas essas propriedades são somente leitura. Vamos usar algumas propriedades para obter informações sobre a resposta do servidor. Para isso, definimos o seguinte servidor em Node.js, que processa as solicitações:

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

http
  .createServer(function (request, response) {
    if (request.url == "/hello") {
      response.end("Fetch para Programício");
    } else {
      fs.readFile("index.html", (error, data) => response.end(data));
    }
  })
  .listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Na página index.html, chamamos a função fetch e obtemos informações sobre a resposta:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <script>
      fetch("/hello").then((response) => {
        console.log(response.status); // 200
        console.log(response.statusText); // OK
        console.log(response.url); // http://localhost:3000/hello
      });
    </script>
  </body>
</html>

Exemplo semelhante com async/await:

async function getResponse() {
  const response = await fetch("/hello");
  console.log(response.status); // 200
  console.log(response.statusText); // OK
  console.log(response.url); // http://localhost:3000/hello
}
getResponse();

A propriedade ok retorna true se o código de status da resposta estiver entre 200 e 299, indicando que a solicitação foi bem-sucedida. Podemos verificar essa propriedade antes de processar a resposta:

fetch("/hello").then((response) => {
  if (response.ok) {
    // processar a resposta
  }
});

Obtendo Cabeçalhos

Usando a propriedade headers, podemos obter os cabeçalhos da resposta, que representam a interface Headers.

Para obter dados dos cabeçalhos, podemos usar um dos seguintes métodos da interface Headers:

entries(): retorna um iterador que permite percorrer todos os cabeçalhos.
forEach(): realiza a iteração pelos cabeçalhos.
get(): retorna o valor de um cabeçalho específico.
has(): retorna true se um cabeçalho específico estiver presente.
keys(): obtém todos os nomes dos cabeçalhos presentes.
values(): obtém todos os valores dos cabeçalhos presentes.

Por exemplo, para obter todos os cabeçalhos da resposta:

fetch("/hello").then((response) => {
  for (let header of response.headers) {
    console.log(header[0], ":", header[1]);
  }
});

Cada cabeçalho é representado como um array de dois elementos, onde o primeiro elemento é o nome do cabeçalho e o segundo é o seu valor.

O console do navegador exibe, por exemplo:

connection : keep-alive
content-length : 22
date : Fri, 03 Jun 2024 17:09:34 GMT
keep-alive : timeout=5

Outro exemplo é a verificação de um cabeçalho específico e a exibição de seu valor se ele estiver presente:

fetch("/hello").then((response) => {
  const headerTitle = "date"; // nome do cabeçalho
  if (response.headers.has(headerTitle)) {
    // se o cabeçalho existir
    console.log(response.headers.get(headerTitle)); // obter seu valor
  }
});

Dessa forma, podemos obter também cabeçalhos personalizados definidos no servidor. Por exemplo, suponha que o servidor Node.js defina o cabeçalho "Secret-Code":

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

http
  .createServer(function (request, response) {
    if (request.url == "/hello") {
      response.setHeader("Secret-Code", 124);
      response.end("Fetch para Programício");
    } else {
      fs.readFile("index.html", (error, data) => response.end(data));
    }
  })
  .listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Para definir um cabeçalho no Node.js, usamos o método response.setHeader(), onde o primeiro parâmetro é o nome do cabeçalho e o segundo é o valor.

Vamos obter este cabeçalho na página web:

fetch("/hello").then((response) => {
  console.log(response.headers.get("Content-Type")); // null - cabeçalho não definido
  console.log(response.headers.get("Secret-Code")); // 124
});

Se o cabeçalho não estiver definido, o método response.headers.get() retorna null.

Redirecionamento

Se durante o processo de solicitação ocorrer um redirecionamento, a propriedade redirected será true e a propriedade url armazenará o endereço para o qual houve o redirecionamento. Por exemplo, vamos configurar um servidor Node.js para redirecionar do endereço "/hello" para o endereço "/newpage":

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

http
  .createServer(function (request, response) {
    if (request.url == "/hello") {
      response.statusCode = 302; // 302 - código de redirecionamento temporário
      response.setHeader("Location", "/newpage"); // redirecionamento para localhost:3000/newpage
      response.end();
    } else if (request.url == "/newpage") {
      response.setHeader("Secret-Code", "New Page Code: 567"); // definindo um cabeçalho para teste
      response.end("This is a new page");
    } else {
      fs.readFile("index.html", (error, data) => response.end(data));
    }
  })
  .listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Vamos fazer uma solicitação para o endereço "/hello" na página web:

fetch("/hello").then((response) => {
  if (response.redirected) {
    console.log("Redirecionado para o endereço", response.url);
    console.log(response.headers.get("Secret-Code"));
  }
});

O console do navegador exibirá:

Redirecionado para o endereço http://localhost:3000/newpage
New Page Code: 567

A partir da saída do console, especificamente pelo cabeçalho "Secret-Code", podemos ver que a função fetch recebeu uma resposta do novo endereço "/newpage".