Obtendo Dados da Resposta - JavaScript

Todos os dados enviados pelo servidor estão disponíveis no objeto Response através da propriedade body, que representa um objeto ReadableStream. No entanto, é muito mais fácil utilizar um dos métodos do objeto Response. A interface Response fornece os seguintes métodos:

arrayBuffer(): retorna uma promise que obtém o conteúdo da resposta como um objeto ArrayBuffer.
blob(): retorna uma promise que obtém o conteúdo da resposta como um objeto Blob.
clone(): retorna uma cópia do objeto Response atual.
error(): retorna um novo objeto Response associado a um erro de rede.
formData(): retorna uma promise que obtém o conteúdo da resposta como um objeto FormData.
json(): retorna uma promise que obtém o conteúdo da resposta como um objeto JSON.
redirect(): retorna um novo objeto Response com outro URL.
text(): retorna uma promise que obtém o conteúdo da resposta como uma string de texto.

Obtendo a Resposta como Texto

Para obter a resposta como texto, utilizamos o método text(). Por exemplo, um servidor Node.js envia algum texto em resposta ao cliente:

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"));

Neste caso, ao acessar o endereço "/hello", o servidor envia ao cliente a string de texto "Fetch para Programício".

Na página index.html, utilizamos o método text() para obter essa string:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
fetch("/hello")
    .then(response => response.text())
    .then(responseText => console.log(responseText));
</script>
</body>
</html>

Para obter o texto enviado, chamamos o método response.text() no objeto response, que retorna uma Promise. Para acessar o texto da resposta, utilizamos um segundo método then() onde, na função de callback, obtemos o texto da resposta:

then(responseText => console.log(responseText));

Ou podemos usar async/await:

async function getText() {
    // Obtém o objeto de resposta
    const response = await fetch("/hello");
    // Extrai o texto da resposta
    const responseText = await response.text();
    console.log(responseText);
}
getText();

Obtendo a Resposta como JSON

Suponha que o servidor envie um objeto JSON:

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

http.createServer(function(request, response) {
    if (request.url == "/user") {
        const user = {name: "Tom", age: 37};
        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 caso, ao acessar o endereço "/user", o servidor envia o objeto user como um JSON.

Vamos obter esse objeto:

fetch("/user")
    .then(response => response.json())
    .then(user => console.log(user.name, " - ", user.age));

O método json()retorna uma Promise, então no segundo método then() podemos obter o objeto JSON enviado e acessar suas propriedades:

.then(user => console.log(user.name, "-", user.age));

O mesmo exemplo utilizando async/await:

async function getUser() {
    // Obtém o objeto de resposta
    const response = await fetch("/user");
    // Extrai o JSON da resposta
    const user = await response.json();
    console.log(user.name, "-", user.age);
}
getUser();

Enviando um Conjunto de Dados

De maneira semelhante, podemos receber um conjunto de objetos no formato JSON. Suponha que o servidor Node.js envie um array de objetos:

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

http.createServer(function(request, response) {
    if (request.url == "/users.json") {
        const users = [
            {name: "Tom", age: 37},
            {name: "Sam", age: 25},
            {name: "Bob", age: 41}
        ];
        response.end(JSON.stringify(users));
    } else {
        fs.readFile("index.html", (error, data) => response.end(data));
    }
}).listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Vamos obter esses dados na página web:

fetch("/users.json")
    .then(response => response.json())
    .then(users => users.forEach(user => console.log(user.name, " - ", user.age)));

O método json() retorna uma Promise, então no segundo método then() podemos obter o array de objetos JSON e acessar suas propriedades:

.then(users => users.forEach(user => console.log(user.name, " - ", user.age)));

O mesmo exemplo utilizando async/await:

async function getUsers() {
    const response = await fetch("/users.json");
    const users = await response.json();
    users.forEach(user => console.log(user.name, " - ", user.age));
}
getUsers();

Enviando um Arquivo JSON

Suponha que exista um arquivo users.json no diretório do servidor com o seguinte conteúdo:

[
    {"name": "Tom", "age": 37},
    {"name": "Sam", "age": 25},
    {"name": "Bob", "age": 41}
]

Obtendo Arquivo JSON em Fetch e JavaScript

No caso de um servidor Node.js, poderíamos enviar esse arquivo da seguinte maneira:

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

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

Dependendo da tecnologia específica do servidor, o envio de arquivos pode variar. Neste caso, assim como no envio do arquivo index.html, lemos os dados do arquivo users.json usando a função fs.readFile() e enviamos na resposta.

No lado do cliente, o código seria o mesmo que no exemplo anterior:

fetch("/users.json")
    .then(response => response.json())
    .then(users => users.forEach(user => console.log(user.name, " - ", user.age)));

Carregando Dados Binários

Com o método blob(), é possível carregar dados binários. Vamos ilustrar isso com um exemplo de imagens. Suponha que exista um arquivo forest.jpg no servidor.

Blob e Carregamento de Dados Binários em Fetch e JavaScript

O servidor Node.js pode enviar este arquivo ao acessar o endereço "forest.jpg":

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

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

Na página web index.html, definimos o seguinte código para acessar o servidor:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <img />
<script>
const img = document.querySelector("img");
fetch("/forest.jpg")
    .then(response => response.blob())
    .then(data => img.src = URL.createObjectURL(data));
</script>
</body>
</html>

Para exibir a imagem na página web, definimos o elemento <img />.

O método blob() retorna uma Promise que recebe os dados da resposta como um objeto Blob. No segundo método then(), obtemos esse objeto:

.then(data => img.src = URL.createObjectURL(data));

Aqui, precisamos definir o arquivo recebido como a fonte da imagem no elemento HTML <img />. Para isso, chamamos a função URL.createObjectURL(), passando o objeto Blob. Esta função cria um URL para o arquivo carregado. Assim, após a execução da requisição, o elemento HTML <img /> exibirá a imagem carregada:

Carregando arquivos em Fetch e JavaScript com o método response.blob()

O mesmo exemplo utilizando async/await:

const img = document.querySelector("img");
async function getImage() {
    const response = await fetch("/forest.jpg");
    const imgBlob = await response.blob();
    img.src = URL.createObjectURL(imgBlob);
}
getImage();

De maneira semelhante, podemos carregar e utilizar outros tipos de arquivos, como áudios e vídeos.