Resumo : neste tutorial, você aprenderá sobre a API JavaScript Fetch e como usá-la para fazer solicitações HTTP assíncronas.
Introdução à API JavaScript Fetch
A API Fetch é uma interface moderna que permite fazer solicitações HTTP para servidores a partir de navegadores da web.
Se você trabalhou com o objeto XMLHttpRequest
( XHR
), a API Fetch pode executar todas as tarefas como o XHR
objeto faz.
Além disso, a API Fetch é muito mais simples e limpa. Ele usa o Promise
para fornecer recursos mais flexíveis para fazer solicitações aos servidores a partir dos navegadores da web.
O fetch()
método está disponível no escopo global que instrui os navegadores a enviar uma solicitação para uma URL.
Enviando uma solicitação
O fetch()
requer apenas um parâmetro que é o URL do recurso que você deseja buscar:
let response = fetch(url);
Linguagem de código: JavaScript ( javascript )
O fetch()
método retorna a Promise
para que você possa usar os métodos then()
e catch()
para lidar com isso:
fetch(url)
.then(response => {
// handle the response
})
.catch(error => {
// handle the error
});
Linguagem de código: JavaScript ( javascript )
Quando a solicitação for concluída, o recurso estará disponível. Neste momento, a promessa se transformará em um Response
objeto.
O Response
objeto é o wrapper da API para o recurso obtido. O Response
objeto possui diversas propriedades e métodos úteis para inspecionar a resposta.
Lendo a resposta
Se o conteúdo da resposta estiver no formato de texto bruto, você poderá usar o text()
método. O text()
método retorna um Promise
que resolve com o conteúdo completo do recurso buscado:
fetch('/readme.txt')
.then(response => response.text())
.then(data => console.log(data));
Linguagem de código: JavaScript ( javascript )
Na prática, você costuma usar async
/await
com o fetch()
método assim:
async function fetchText() {
let response = await fetch('/readme.txt');
let data = await response.text();
console.log(data);
}
Linguagem de código: JavaScript ( javascript )
Além do text()
método, o Response
objeto possui outros métodos como json()
, blob()
e formData()
para arrayBuffer()
tratar o respectivo tipo de dados.
Tratamento dos códigos de status da resposta
O Response
objeto fornece o código de status e o texto de status por meio das propriedades status
e statusText
. Quando uma solicitação é bem-sucedida, o código de status é 200
e o texto do status é OK
:
async function fetchText() {
let response = await fetch('/readme.txt');
console.log(response.status); // 200
console.log(response.statusText); // OK
if (response.status === 200) {
let data = await response.text();
// handle data
}
}
fetchText();
Linguagem de código: JavaScript ( javascript )
Saída:
200
OK
Linguagem de código: JavaScript ( javascript )
Se o recurso solicitado não existir, o código de resposta será 404
:
let response = await fetch('/non-existence.txt');
console.log(response.status); // 400
console.log(response.statusText); // Not Found
Linguagem de código: JavaScript ( javascript )
Saída:
400
Not Found
Linguagem de código: JavaScript ( javascript )
Se o URL solicitado gerar um erro de servidor, o código de resposta será 500
.
Se o URL solicitado for redirecionado para o novo com a resposta 300-309
, o valor status
do Response
objeto será definido como 200
. Além disso, a redirected
propriedade está definida como true
.
O fetch()
retorna uma promessa que é rejeitada quando ocorre uma falha real, como tempo limite do navegador da web, perda de conexão de rede e violação de CORS.
Exemplo de API de busca JavaScript
Suponha que você tenha um arquivo json localizado no servidor web com o seguinte conteúdo:
[{
"username": "john",
"firstName": "John",
"lastName": "Doe",
"gender": "Male",
"profileURL": "img/male.png",
"email": "[email protected]"
},
{
"username": "jane",
"firstName": "Jane",
"lastName": "Doe",
"gender": "Female",
"profileURL": "img/female.png",
"email": "[email protected]"
}
]
Linguagem de código: JSON/JSON com comentários ( json )
O seguinte mostra a página HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"></div>
<script src="js/app.js"></script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
No app.js
, usaremos o fetch()
método para obter os dados do usuário e renderizar os dados dentro do <div>
elemento com a classe container
.
Primeiro, declare a getUsers()
função que busca users.json
no servidor.
async function getUsers() {
let url = 'users.json';
try {
let res = await fetch(url);
return await res.json();
} catch (error) {
console.log(error);
}
}
Linguagem de código: JavaScript ( javascript )
Em seguida, desenvolva a renderUsers()
função que renderiza os dados do usuário:
async function renderUsers() {
let users = await getUsers();
let html = '';
users.forEach(user => {
let htmlSegment = `<div class="user">
<img src="${user.profileURL}" >
<h2>${user.firstName} ${user.lastName}</h2>
<div class="email"><a href="email:${user.email}">${user.email}</a></div>
</div>`;
html += htmlSegment;
});
let container = document.querySelector('.container');
container.innerHTML = html;
}
renderUsers();
Linguagem de código: JavaScript ( javascript )
Confira a demonstração da API Fetch .
Resumo
- A API Fetch permite solicitar um recurso de forma assíncrona.
- Use o
fetch()
método para retornar uma promessa que se transforma em umResponse
objeto. Para obter os dados reais, você chama um dos métodos do objeto Response, por exemplo,text()
oujson()
. Esses métodos resultam nos dados reais. - Use as propriedades
status
estatusText
doResponse
objeto para obter o status e o texto de status da resposta. - use o
catch()
método outry...catch
instrução para lidar com uma solicitação de falha.