Fetch

O fetch é uma API que permite realizar requisições de rede e retorna uma Promise com a resposta. Ele suporta operações assíncronas para importar dados de APIs e permite personalização através de métodos, cabeçalhos e corpos. É importante verificar o status da resposta, pois o fetch não rejeita a Promise em caso de erros HTTP, e pode ser utilizado com async/await para maior legibilidade.

Enviado por

yanndiosti67

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato TXT, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

25 visualizações4 páginas

Fetch

Enviado por

yanndiosti67

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato TXT, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 4

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('https://api.exemplo.com/dados')
.then(response => {
if (!response.ok) {
throw new Error('Erro na rede: ' + response.statusText);
}
return response.json(); // Retorna a resposta como JSON
})
.then(dados => {
console.log(dados); // Manipula os dados da resposta
})
.catch(error => {
console.error('Erro na requisição:', error);
});
2. Requisição POST
Para enviar dados ao servidor, você pode usar o método POST.

javascript
fetch('https://api.exemplo.com/dados', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
nome: 'João',
idade: 30
})
})
.then(response => {
if (!response.ok) {
throw new Error('Erro na rede: ' + response.statusText);
}
return response.json();
})
.then(dados => {
console.log('Dados enviados com sucesso:', dados);
})
.catch(error => {
console.error('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 = 'https://api.exemplo.com/atualiza-dados';
const dadosAtualizados = {
id: 1,
nome: 'Maria',
};

fetch(url, {
method: 'PUT', // Para atualizar dados
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(dadosAtualizados)
})
.then(response => {
if (!response.ok) {
throw new Error('Erro na rede: ' + response.statusText);
}
return response.json();
})
.then(dados => {
console.log('Dados atualizados com sucesso:', dados);
})
.catch(error => {
console.error('Erro na requisição:', error);
});
4. Encadeamento de Requisições
O fetch permite encadear múltiplas requisições de forma limpa:

javascript
fetch('https://api.exemplo.com/dados1')
.then(response => response.json())
.then(dados1 => {
console.log('Dados 1:', dados1);
return fetch('https://api.exemplo.com/dados2'); // Nova requisição
})
.then(response => response.json())
.then(dados2 => {
console.log('Dados 2:', dados2);
})
.catch(error => {
console.error('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('https://api.exemplo.com/dados');
if (!response.ok) {
throw new Error('Erro na rede: ' + response.statusText);
}
const dados = await response.json(); // Retorna como JSON
console.log(dados);
} catch (error) {
console.error('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('https://api.exemplo.com/dados')
.then(response => {
if (!response.ok) {
return Promise.reject('Erro: ' + response.status); // Lança um erro se
não for 2xx
}
return response.json();
})
.then(dados => {
console.log(dados);
})
.catch(error => {
console.error('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('https://api.exemplo.com/dados', {
method: 'GET',
headers: {
'Authorization': 'Bearer seu_token_aqui', // Token de autenticação
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(dados => {
console.log(dados);
})
.catch(error => {
console.error('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.

Fetch

Enviado por

Fetch

Enviado por

O que é fetch?

Exemplo de Avançado com Tratamento de Erros

Cabeçalhos: Usados para enviar informações adicionais (como autenticação, tipo de

Você também pode gostar