Como buscar dados de uma API em JavaScript

Ao criar uma aplicação na vida real em JavaScript, o aplicativo precisa interagir com APIs Para enviar e receber dados. No JavaScript, existem muitas maneiras de interagir com uma API, mas a maneira mais comum e mais básica de interagir com uma API é usando o Buscar() Método do Buscar API Fornecido pelo navegador. Neste post, vamos aprender a obter dados de um API simulada Usando JavaScript de baunilha e a API busca.

O método fetch ()

Este método é usado para coletar dados de qualquer API que responda à solicitação de um cliente na forma de JSON ou XML. A sintaxe do método de busca é bem simples, leva apenas um argumento obrigatório e um parâmetro opcional como

buscar (URL, opções);

• URL: o URL da API para alcançar e pedir uma resposta na forma de JSON ou Xml
• Opções: parâmetros opcionais que nos ajudam a alterar a solicitação de "pegar" para "publicar" e outras variantes
• Observação: O método de busca retorna uma promessa

Para usar o método Fetch () em seu JavaScript, você precisa envolvê -lo em uma função assíncrona e chamar isso de busca () com a palavra -chave aguarda. Com a função assíncrona, a sintaxe é definida como

ASYNC FUNCTION_IDENTIFIER (URL)
const Response = aguarda buscar (URL);
Dados var = aguardar resposta.json ();

Buscar dados de uma API usando o método fetch () em javascript

Para testar o método Fetch () para buscar dados de uma API, você precisa de uma API dummy ou uma API simulada. Para esse fim, estamos usando a API fictícia fornecida por Req | res com o URL ““https: // reqres.in/api/produtos/3”.

A segunda coisa que precisamos é uma compreensão básica de como promessas Trabalhe em JavaScript, para aprender sobre as promessas em JavaScript, você pode visitar este link.

Em seguida, precisamos de uma página HTML dummy com alguns elementos básicos dentro dela. Para este exemplo, usamos as seguintes linhas no HTML:

Buscando dados da API

Isso deve nos dar a seguinte página da web:

Para o código JavaScript, a primeira coisa que precisamos fazer é armazenar o URL em uma variável separada com a seguinte linha:

const url = "https: // reqres.in/API/Produtos/3 ";

Então nós definimos um função assíncrona Para obter os dados da API usando o Url Acabamos de armazenar com as seguintes linhas:

função assíncrona getDataFromApi (url)
const Response = aguarda buscar (URL);
Dados var = aguardar resposta.json ();
console.log (dados);

O que estamos fazendo neste código é que estamos esperando por um promessa de buscar (url) e armazenando essa promessa dentro do resposta variável.

Depois de recebermos a promessa, precisamos convertê -lo no formato JSON usando o resposta.JSON (). Desde resposta.JSON () também é uma promessa que retorna dados, usamos a palavra -chave aguardam.

Por fim, estamos imprimindo os dados obtidos na API usando a função de log do console.

Agora, tudo o que precisamos fazer é chamar isso de função assíncrona e passar no URL da API com a seguinte linha:

getDataFromapi (Url);

O trecho de código completo é:

const url = "https: // reqres.in/API/Produtos/3 ";
função assíncrona getDataFromApi (url)
const Response = aguarda buscar (URL);
Dados var = aguardar resposta.json ();
console.log (dados);

getDataFromApi (URL);

Se você executar esta página da web e for para o console nas ferramentas de desenvolvedor do navegador, verá a seguinte saída:

É isso, você obteve dados com sucesso de uma API usando JavaScript.

Conclusão

O buscar() Método do Buscar API pode ser usado para buscar dados de um API em Javascript de baunilha. Quando você está trabalhando com aplicativos da vida real, você precisa saber como interagir com uma API para enviar e receber dados. Neste post, analisamos o método Fetch () para enviar um REQ para uma API simulada e recebemos dados dessa API, e depois convertemos esses dados em JSON com a ajuda de promessas para que possam ser usadas em nossa aplicação.