A API JavaScript Fetch fornece uma maneira intuitiva de fazer solicitações do cliente do seu aplicativo em execução no navegador.
É fácil de usar e utiliza a sintaxe JavaScript moderna. Este artigo é um guia sobre como usar a API Fetch.
últimas postagens
O que é API de busca JavaScript?
JavaScript Fetch API é uma interface que os navegadores modernos fornecem para fazer solicitações do front-end. Ele fornece uma alternativa ao antigo AJAX XMLHttpRequest.
Está disponível como uma função global chamada fetch. Quando chamada com argumentos, esta função retorna uma promessa que resulta em uma resposta. Com a função fetch, você pode fazer todos os tipos de solicitações HTTP.
Vantagens da API Fetch sobre outros métodos
- Possui uma interface mais simples e intuitiva, fácil de aprender e usar. Como resultado, seu código fica mais limpo quando você usa a API Fetch. XMLHttpRequest é mais complicado e seu código não é tão limpo como quando você usa a API Fetch.
- Ele oferece suporte a promessas, o que permite escrever código assíncrono de maneira mais limpa. XMLHttpRequest não os suporta; em vez disso, você deve adicionar retornos de chamada aos manipuladores de eventos. Dependendo da sua preferência, você pode preferir a API JavaScript Fetch.
- É suportado nativamente no navegador. Isso significa que você não precisa adicionar bibliotecas adicionais para fazer solicitações. Bibliotecas adicionais aumentarão o seu pacote JavaScript e tornarão o seu site mais lento.
Usando a API Fetch
Esta seção abordará como fazer diferentes solicitações usando a API JavaScript Fetch. Para escrever o código, você pode usar o editor de sua preferência. Apenas certifique-se de executar o código no navegador. Vou executá-lo dentro de uma tag de script em um arquivo HTML.
Uma solicitação GET simples
Primeiro, aprenderemos a fazer uma solicitação get simples. O código para fazer isso segue esta estrutura:
fetch(url)
Portanto, se quiséssemos buscar postagens do API de espaço reservado JSONvocê faria da seguinte maneira:
fetch('https://jsonplaceholder.typicode.com/posts');
A chamada de função retornará uma promessa, resolvendo a resposta da API ou um erro, caso algum tenha sido encontrado. Portanto, para acessar a resposta, utilizaremos a palavra-chave await. Mas só podemos usar a palavra-chave await em uma função assíncrona.
Então, vamos envolver a função fetch com uma função assíncrona e chamá-la. Se você não está familiarizado com tudo isso, aqui está um guia detalhado sobre JavaScript assíncrono. De qualquer forma, o código:
async function getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
console.log(response);
}
getData();
Se você executar o código acima, deverá obter a seguinte saída em sua saída.
A saída indica que a função de busca retornou um objeto Response. Este objeto possui propriedades que incluem status, cabeçalhos e corpo. Os dados de resposta são armazenados como uma string JSON no corpo. Portanto, devemos extrair a string e analisar o JSON para obter os dados como um objeto JavaScript.
Felizmente, o objeto Response possui um método útil chamado json(). Este método lê o corpo da resposta e tenta analisar a string como JSON. Ele retorna uma promessa que resolve um objeto analisado no JSON.
No entanto, este método gerará um erro se o corpo não for uma string JSON válida. Portanto, só devemos analisar o JSON se a resposta tiver um código de status 200.
Portanto, o código para obter postagens será o seguinte:
async function getData() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts"
);
if (response.status == 200) {
const posts = await response.json();
console.log(posts);
} else {
console.log("Something went wrong:", response.status);
}
}
getData();
A execução do código acima produzirá os seguintes resultados:
Esta é uma série de cem postagens.
Alguns endpoints de API exigem cabeçalhos. Esses cabeçalhos poderiam ser usados para autorização, por exemplo. A API JavaScript Fetch fornece uma maneira fácil de enviar cabeçalhos como parte da solicitação. Você deve passar um argumento de opções para sua chamada de função fetch para especificar cabeçalhos.
fetch(url, options);
Então, nosso exemplo anterior ficaria assim:
async function getData() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts", {
headers: {
'x-auth': '<your auth token>'
}
}
);
if (response.status == 200) {
const posts = await response.json();
console.log(posts);
} else {
console.log("Something went wrong:", response.status);
}
}
getData();
Como a API JSONPlaceholder não requer um cabeçalho de autorização, o código acima funcionará como antes. Porém, é importante saber que existe a opção de passar cabeçalhos.
Passando em outras opções
Além de passar cabeçalhos, você pode passar muitas outras opções para a função de busca. As duas opções que você vai passar bastante são o método de solicitação e as opções de corpo da solicitação.
Faremos uma solicitação POST para a API JSONPlaceholder para demonstrar a passagem de ambos. Aqui está o código para fazer isso:
async function getData() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts", {
method: 'POST',
body: JSON.stringify({
title: 'Fetch API',
body: 'Lorem Ipsum',
userId: 1,
})
}
);
if (response.status == 200) {
const posts = await response.json();
console.log(posts);
} else {
console.log("Something went wrong:", response.status);
}
}
getData();
Em nosso objeto de opções, especificamos o método de solicitação que queremos usar e o corpo como propriedades. Para ambas as propriedades, fornecemos argumentos de string. Fornecemos a string ‘POST’ para o método de solicitação, pois queremos fazer uma solicitação POST. Também fornecemos uma string JSON para a propriedade body. Esta string JSON é formada pela stringificação de um objeto com as propriedades necessárias.
A execução deste código no navegador produz a seguinte saída:
A saída é um objeto que contém o ID que acabamos de receber do servidor. Aqui está um ótimo recurso para obter a lista completa de opções que você pode passar.
Erros ao usar a API JavaScript Fetch
#1. Erros de rede
Ao fazer solicitações de rede, é comum encontrar erros. A função fetch retorna uma promessa que resolve o resultado ou rejeita quando um erro de rede é encontrado. Portanto, devemos agrupar nosso código em um bloco try/catch. Para lidar com erros de rede normalmente.
#2. Outros erros
Além dos erros de rede, você também pode encontrar outros erros, como 404s, 403s e 500s. A função fetch não gera um erro quando tais erros são encontrados. Portanto, você precisa verificá-los verificando o código de status da resposta. Por exemplo, nos exemplos anteriores, tentamos analisar o corpo da resposta apenas quando o código de status era 200.
#3. Erros CORS
Outros erros comuns que você encontrará são erros CORS. CORS significa Compartilhamento de recursos entre origens. Uma origem é a combinação única de protocolo, host e porta de um servidor. Por exemplo, meu site pode estar rodando em localhost, o host, na porta 5500, a porta, e servido por HTTP, o protocolo. Portanto, a origem desse site seria http://localhost:5500.
O mesmo site fará uma solicitação de API para a API https://jsonplaceholder.typicode.com, uma origem diferente. Portanto, essas duas origens, localhost e JSONPlaceholder, estão compartilhando recursos. Isso é compartilhamento de recursos entre origens. No entanto, o servidor API precisa permitir que o CORS funcione. Isso não é sempre o caso. A solução para lidar com esses erros seria fazer solicitações por meio de um servidor proxy habilitado para CORS.
Suporte ao navegador
A API de busca é um recurso bastante moderno. De acordo com CanIUse. comcerca de 95% dos usuários globais possuem navegadores compatíveis.
Conclusão
A API JavaScript Fetch é uma maneira sintaticamente melhor e mais elegante de escrever front-ends que fazem solicitações de API. Dado o seu suporte limitado ao navegador, você pode considerar outras bibliotecas de cliente HTTP.