Função fetch - JavaScript

A Fetch API oferece uma ferramenta simplificada, mas ao mesmo tempo poderosa e flexível, para acessar recursos de rede, em comparação com o XMLHttpRequest padrão.

O elemento central dessa API é a função fetch(). Ela possui a seguinte sintaxe:

const fetchPromise = fetch(resource [, init]);

O parâmetro obrigatório resource especifica o recurso que a função irá acessar. O parâmetro opcional init pode receber um objeto com configurações adicionais para a solicitação.

A função fetch() retorna um objeto Promise, que recebe uma resposta após a conclusão da solicitação ao recurso de rede.

Definindo um Recurso no Servidor

Vamos analisar um exemplo simples. Primeiramente, precisamos de um recurso de rede para acessar. Para simular esse recurso, utilizaremos um servidor web local. O servidor web pode ser qualquer um, mas usaremos Node.js para este exemplo. Antes de criar a aplicação, é necessário instalar o Node.js. Contudo, em vez de Node.js, poderia ser qualquer outra tecnologia de servidor como PHP, ASP.NET, Python, entre outras, ou até mesmo um servidor web específico como Apache ou IIS.

Vamos criar uma pasta no disco rígido para os arquivos do servidor web. Por exemplo, no meu caso, a pasta será C:\app. Em seguida, nessa pasta, criaremos o arquivo do servidor chamado server.js com o seguinte código:

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

Este é um servidor simples, mas suficiente para nossa tarefa. Vamos revisar o código:

Primeiro, são importados os pacotes com a funcionalidade que usaremos:

const http = require("http");   // para processar solicitações recebidas
const fs = require("fs");       // para ler o arquivo index.html do disco rígido

Para criar o servidor, usamos a função http.createServer(). Essa função recebe uma função manipuladora, que é chamada sempre que uma solicitação chega ao servidor. Esta função possui dois parâmetros: request (contém os dados da solicitação) e response (controla o envio da resposta).

Na função manipuladora, usamos a propriedade request.url para determinar qual recurso no servidor está sendo solicitado. No nosso caso, se a solicitação for para o caminho "/hello", respondemos com o texto "Fetch para Programício" usando o método response.end():

if (request.url == "/hello") {
    response.end("Fetch para Programício");
}

Se a solicitação for para outro recurso, enviamos o arquivo index.html, que definiremos posteriormente:

else {
    fs.readFile("index.html", (error, data) => response.end(data));
}

Para ler arquivos, usamos a função incorporada fs.readFile(). O primeiro parâmetro é o caminho do arquivo (neste caso, assumimos que o arquivo index.html está na mesma pasta que o arquivo do servidor server.js). O segundo parâmetro é uma função callback que é chamada após a leitura do arquivo e recebe seu conteúdo através do segundo parâmetro data. Esse conteúdo pode então ser enviado usando a função response.end(data).

Por fim, usamos a função listen() para iniciar o servidor web na porta 3000. Ou seja, o servidor será iniciado no endereço http://localhost:3000/.

Realizando uma Requisição com Fetch

Agora, na pasta do servidor, vamos definir um arquivo simples chamado index.html. Coloque o seguinte conteúdo nesse arquivo:

<!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>

Na função fetch(), passamos o endereço do recurso. Neste caso é "/hello":

fetch("/hello")

Como a função fetch() retorna um objeto Promise, podemos usar o método then() para obter o resultado da solicitação:

fetch("/hello").then(response => response.text())

No método then(), passamos uma função callback que recebe a resposta do servidor como parâmetro. No entanto, a resposta do servidor é um objeto complexo que encapsula muitas informações diferentes. Estamos interessados apenas no texto enviado pelo servidor, e para obter esse texto, chamamos o método response.text() no objeto de resposta.

O método response.text() também retorna um Promise. Para obter o texto da resposta, adicionamos um segundo método then(), onde a função callback recebe o texto da resposta:

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

Agora, no console, navegue até a pasta do servidor usando o comando cd e inicie o servidor com o comando node server.js

C:\app>node server.js
Servidor iniciado em http://localhost:3000

Após iniciar o servidor, podemos acessar a página no navegador pelo endereço http://localhost:3000. A página exibirá o conteúdo, e no código JavaScript, a função fetch() fará uma solicitação ao recurso "/hello".

Como resultado, ao acessar o recurso "/hello", o servidor enviará a string "Fetch para Programício", que será exibida na página da web.

No exemplo acima, usamos um caminho relativo, mas também poderíamos usar um caminho absoluto especificando o protocolo, endereço do servidor e porta:

fetch("http://localhost:3000/hello")
    .then(response => response.text())
    .then(responseText => console.log(responseText));

Usando Fetch com async/await

Como a função fetch() retorna uma Promise, em vez de encadear métodos then(), podemos usar os operadores async/await para obter a resposta. Vamos reescrever o exemplo anterior:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
async function getText() {
// obtendo o objeto de resposta
const response = await fetch("/hello");
// extraindo o texto da resposta
const responseText = await response.text();
console.log(responseText);
}
</script>
</body>
</html>

getText();