Olá pessoal. Neste artigo, irei mostrar como mostrar os dados advindos de um endereço IP utilizando o IP-API. Neste exemplo, iremos utilizar:
- fetch;
- async;
- await.
Vamos lá?
Uma breve explicação sobre fetch:
O método fetch() fornece uma maneira fácil e rápida para buscar informações e recursos de uma forma assíncrona através da rede. Antes, essa funcionalidade era obtida com o XMLHttpRequest. O fetch() difere do jQuery.ajax(), principalmente nos quesitos de: A promise retornada do fetch() não rejeita status de erro HTTP, e só haverá rejeição se houver falha de rede ou impedimento da requisição ser completada e também o fetch() não envia nem recebe cookies do servidor.
Para mais informações sobre o fetch, acesse esse artigo.
Mãos à obra!
Para utilizarmos a IP-API, podemos acessar o site e sua documentação em:
https://ip-api.com/docs/api:json#test, onde é possível realizar testes, acessando os dados de diferentes IPs.
Ao código:
O primeiro passo é criarmos um documento HTML com um elemento <pre id=”json”></pre>:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fetch IP API</title>
</head>
<body>
<pre id="json"></pre>
<script src="scripts.js"></script>
</body>
</html>
Adicione uma tag script que aponta para um arquivo “scripts.js” (que será criado agora).
Criando o script:
Crie um arquivo scripts.js no seu editor de texto preferido. Com o arquivo criado, iremos começar a escrever uma função assíncrona chamada fetchIpApi(). A estrutura será a seguinte:
async function fetchIpApi(){}
Agora, iremos utilizar o método try…catch para realizar o teste de verificação de funcionamento da API.
- A instrução try define o bloco de código a ser testado enquanto ele está sendo executado;
- A instrução catch permite definir um bloco de código a ser executado se ocorrer algum erro no bloco try.
async function fetchIpApi(){
try{
} catch(err) {
}
}
Ok, agora que temos nossos blocos try…catch definidos, iremos criar uma variável response que vai receber um await e o fetch(requisição) da Ip-API. Iremos capturar os dados do IP DNS do Google (8.8.8.8) (Caso você não saiba o que é async/await, leia este artigo)
async function fetchIpApi(){
try{
// Criando uma requisição da API
let response = await fetch('http://ip-api.com/json/8.8.8.8?fields=61439');
} catch (err){
}
}
Feita a requisição, precisamos agora de uma resposta desta requisição. Para isso, utilizaremos o método response.json(), que retorna uma promise com o conteúdo transformado em arquivo json. Crie uma variável chamada usuário para isso e a retorne:
async function fetchIpApi(){
try{
let response = await fetch('http://ip-api.com/json/8.8.8.8?fields=61439');
// Crie a variável usuário e pegue a resposta da requisição
let usuario = await response.json();
return usuario;
} catch (err){
console.log(err);
}
}
No nosso tratamento de erro, apenas vamos mostrar no console a ocorrência de algum erro.
Agora, para mostrar o nosso arquivo JSON no HTML, iremos utilizar o método .then(), que:
- Capturará o elemento HTML com id=”json”;
- Utilizará o innerText para mostrar as informações em tela;
- Receberá o arquivo formatado, utilizando o JSON.stringify().
fetchIpApi().then(
// JSON.stringify(dado, undefined, 2) traz o conteúdo formatado!
dado =>document.getElementById("json").innerText = JSON.stringify(dado, undefined, 2)
);
E esse será o resultado no seu navegador:
O código JavaScript completo:
async function fetchIpApi(){
try{
let response = await fetch('http://ip-api.com/json/8.8.8.8?fields=61439');
let usuario = await response.json();
return usuario;
} catch (err){
console.log(err);
}
}
fetchIpApi().then(
dado =>document.getElementById("json").innerText = JSON.stringify(dado, undefined, 2)
);
Gostou deste artigo? Comente abaixo!