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 XHRobjeto faz.
Além disso, a API Fetch é muito mais simples e limpa. Ele usa o Promisepara 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 Promisepara 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 Responseobjeto.
O Responseobjeto é o wrapper da API para o recurso obtido. O Responseobjeto 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 Promiseque 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 Responseobjeto 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 Responseobjeto fornece o código de status e o texto de status por meio das propriedades statuse statusText. Quando uma solicitação é bem-sucedida, o código de status é 200e 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
OKLinguagem 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 FoundLinguagem de código: JavaScript ( javascript )Saída:
400
Not FoundLinguagem 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 statusdo Responseobjeto será definido como 200. Além disso, a redirectedpropriedade 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.jsonno 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 umResponseobjeto. 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
statusestatusTextdoResponseobjeto para obter o status e o texto de status da resposta. - use o
catch()método outry...catchinstrução para lidar com uma solicitação de falha.
