Como utilizar o método Fetch()
- #JavaScript
O método fetch() é uma maneira moderna e mais flexível de fazer requisições de rede (como buscar dados de um servidor) em JavaScript. Ele permite que você recupere recursos de uma URL especificada, como JSON, imagens, HTML etc.
ex passo a passo:
Passo 1: Iniciar uma requisição
Para usar o fetch(), você começa chamando-o com a URL do recurso que você deseja buscar. Isso retorna uma promessa (Promise) que representará a resposta da requisição.
const url = 'https://api.exemplo.com/dados';
const promise = fetch(url);
Passo 2: Lidar com a resposta
A promessa retornada pelo fetch() será resolvida quando a resposta da requisição estiver disponível. Você pode usar o método .then() para tratar essa resposta quando ela chegar.
promise.then(response => {
// Aqui você lida com a resposta da requisição
});
Passo 3: Converter a resposta para o formato desejado
A resposta da requisição não está diretamente disponível como um objeto JavaScript. Geralmente, você precisará convertê-la para o formato desejado, como JSON.
promise.then(response => {
return response.json(); // Converte a resposta para JSON
}).then(data => {
// Aqui você lida com os dados convertidos
});
Passo 4: Lidar com erros
É importante também lidar com possíveis erros de rede ou de resposta. Você pode fazer isso usando o método .catch().
promise.then(response => {
if (!response.ok) {
throw new Error('Erro na requisição');
}
return response.json();
})
.then(data => {
// Aqui você lida com os dados
})
.catch(error => {
console.error('Erro:', error);
});
Temos então o final do método fetch(), que trabalha com promessas, que assim te permite escrever códigos de forma assíncrona mais limpa e legível, ficando dessa forma:
const url = 'https://api.exemplo.com/dados';
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Erro na requisição');
}
return response.json();
})
.then(data => {
})
.catch(error => {
console.error('Erro:', error);
});
continuação do artigo caso queira se aprofundar um pouco mais na base do método: https://web.dio.me/articles/complemento-do-metodo-fetch-sobre-o-then?back=%2Farticles&open-modal=true&page=1&order=oldest
