O que é fetch?
O fetch é uma função que permite fazer requisições de rede para recuperar recursos.
Ele retorna uma Promise que resolve para a resposta da requisição, que pode ser
manipulada usando métodos como .then() e .catch().
Sintaxe Básica
A sintaxe básica do fetch é a seguinte:
javascript
fetch(url, options)
.then(response => {
// Manipula a resposta
})
.catch(error => {
// Manipula erros
});
url: Uma string que representa a URL do recurso que você deseja buscar.
options (opcional): Um objeto que contém parâmetros adicionais, como o método HTTP,
cabeçalhos, corpo da requisição, entre outros.
Exemplos de Uso
1. Requisição GET Simples
A requisição mais comum é a método GET, que é usada para obter dados de um recurso.
javascript
fetch('[Link]
.then(response => {
if (![Link]) {
throw new Error('Erro na rede: ' + [Link]);
}
return [Link](); // Retorna a resposta como JSON
})
.then(dados => {
[Link](dados); // Manipula os dados da resposta
})
.catch(error => {
[Link]('Erro na requisição:', error);
});
2. Requisição POST
Para enviar dados ao servidor, você pode usar o método POST.
javascript
fetch('[Link] {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: [Link]({
nome: 'João',
idade: 30
})
})
.then(response => {
if (![Link]) {
throw new Error('Erro na rede: ' + [Link]);
}
return [Link]();
})
.then(dados => {
[Link]('Dados enviados com sucesso:', dados);
})
.catch(error => {
[Link]('Erro na requisição:', error);
});
3. Requisição com Configurações Personalizadas
Você pode personalizar muito uma requisição usando o objeto options.
javascript
const url = '[Link]
const dadosAtualizados = {
id: 1,
nome: 'Maria',
};
fetch(url, {
method: 'PUT', // Para atualizar dados
headers: {
'Content-Type': 'application/json'
},
body: [Link](dadosAtualizados)
})
.then(response => {
if (![Link]) {
throw new Error('Erro na rede: ' + [Link]);
}
return [Link]();
})
.then(dados => {
[Link]('Dados atualizados com sucesso:', dados);
})
.catch(error => {
[Link]('Erro na requisição:', error);
});
4. Encadeamento de Requisições
O fetch permite encadear múltiplas requisições de forma limpa:
javascript
fetch('[Link]
.then(response => [Link]())
.then(dados1 => {
[Link]('Dados 1:', dados1);
return fetch('[Link] // Nova requisição
})
.then(response => [Link]())
.then(dados2 => {
[Link]('Dados 2:', dados2);
})
.catch(error => {
[Link]('Erro na requisição:', error);
});
5. Uso de Async/Await
Podemos usar async/await para tornar o código de requisições mais legível:
javascript
async function obterDados() {
try {
const response = await fetch('[Link]
if (![Link]) {
throw new Error('Erro na rede: ' + [Link]);
}
const dados = await [Link](); // Retorna como JSON
[Link](dados);
} catch (error) {
[Link]('Erro na requisição:', error);
}
}
// Chamando a função
obterDados();
Tratamento de Erros
Um aspecto importante ao usar fetch é que ele não rejeita a Promise quando a
resposta HTTP indica um erro (como 404 ou 500). Você deve verificar a propriedade
ok do objeto Response para determinar se a requisição foi bem-sucedida.
Exemplo de Avançado com Tratamento de Erros
javascript
fetch('[Link]
.then(response => {
if (![Link]) {
return [Link]('Erro: ' + [Link]); // Lança um erro se
não for 2xx
}
return [Link]();
})
.then(dados => {
[Link](dados);
})
.catch(error => {
[Link]('Erro:', error);
});
Cabeçalhos e Outras Configurações
Você pode personalizar requisições com cabeçalhos e outras opções:
Cabeçalhos: Usados para enviar informações adicionais (como autenticação, tipo de
conteúdo).
body: Para enviar dados em métodos como POST, PUT ou PATCH.
Exemplo com autenticação e cabeçalhos personalizados:
javascript
fetch('[Link] {
method: 'GET',
headers: {
'Authorization': 'Bearer seu_token_aqui', // Token de autenticação
'Content-Type': 'application/json'
}
})
.then(response => [Link]())
.then(dados => {
[Link](dados);
})
.catch(error => {
[Link]('Erro na requisição:', error);
});
Resumo
fetch é uma API para fazer requisições de rede que retorna uma Promise.
Permite realizar operações assíncronas para importar dados de APIs.
É possível personalizar requisições com métodos, cabeçalhos e corpos.
A verificação do status da resposta é crucial, pois fetch não rejeita a Promise em
caso de erros HTTP (como 404 ou 500).
Combina bem com async/await para melhor legibilidade.