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!