Buscando dados de Geolocalização com IP-API

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!