API
Blog

Trabalhando com API em JavaScript com Método Fetch

15 de June de 2024 /

No desenvolvimento web moderno, o uso de APIs (Application Programming Interfaces) se tornou fundamental para criar aplicações dinâmicas e interativas. JavaScript, sendo uma das linguagens de programação mais populares, oferece diversas ferramentas e métodos para trabalhar com APIs de maneira eficiente.

O que é uma API?

Uma API, ou Interface de Programação de Aplicações, é um conjunto de regras que permite que diferentes sistemas de software se comuniquem entre si. No contexto do desenvolvimento web, APIs frequentemente são usadas para permitir que um frontend (a parte visível de uma aplicação) se comunique com um backend (a parte oculta que processa dados e lógica de negócios).

Uma das maneiras mais comuns de fazer requisições HTTP em JavaScript é utilizando a função fetch. Introduzida no ECMAScript 6, fetch oferece uma interface moderna e flexível para trabalhar com APIs.

Exemplo

Neste exemplo, fazemos uma requisição GET para a URL da API. Utilizamos fetch para obter a resposta, convertemos a resposta para JSON e então manipulamos os dados recebidos. Caso ocorra um erro, ele é capturado e exibido no console.

Tratamento de Erros

O tratamento de erros é essencial ao trabalhar com APIs para garantir que a aplicação lida corretamente com situações inesperadas, como falhas de rede ou respostas inválidas.

Exemplo

Exemplo Prático 

HTML


<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">    
    <script src="./js/script.js" type='module' ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.js" integrity="sha512-UNbeFrHORGTzMn3HTt00fvdojBYHLPxJbLChmtoyDwB6P9hX5mah3kMKm0HHNx/EvSPJt14b+SlD8xhuZ4w9Lg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <title>Estudo de API com JavaScript</title>
</head>
<body>
    <main class="container">
        <h1 class="title">Sistema de Cadastro</h1>
        <div class="row">
            <div class="inputbox">
                <input type="text" id="nome" required>
                <label for="nome">Nome</label>
            </div>
            <div class="inputbox">
                <input type="text" id="email"  required>
                <label for="email">Email</label>
            </div>
        </div>
        <div class="row">
            <div class="inputbox">
                <input type="text" id="cep"  required> 
                <label for="cep">CEP</label>
            </div>
            <div class="inputbox">
                <input type="text" id="endereco"  required>
                <label for="endereco">Endereço</label>
            </div>
            <div class="inputbox">
                <input type="text" id="numero"  required>
                <label for="numero">Número</label>
            </div>
        </div>
        <div class="row">
            <div class="inputbox">
                <input type="text" id="bairro"  required>
                <label for="bairro">Bairro</label>
            </div>
            <div class="inputbox">
                <input type="text" id="cidade"  required>
                <label for="cidade">Cidade</label>
            </div>
            <div class="inputbox">
                <input type="text" id="estado"  required>
                <label for="estado">Estado</label>
            </div>
        </div>
        <div class="row">
            <button id="salvar">Salvar</button>
        </div>
    </main>
    <footer>
        Aula de API &#169 2024
    </footer>
</body>
</html>

CSS


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: rgb(4, 49, 123);
}

.container {
    flex-grow: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%;
    padding: 20px;
    gap: 40px;
}

.title {
    font-size: 40px;
    text-align: center;    
    color: #fff;
}

.row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}
label{

    color: white;
}

.inputbox {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    height: 40px;
   
}

.inputbox input {    
    background-color: #f2e48e;   
}

button {
    cursor: pointer;
    justify-self: center;
    width: 200px;
    height: 50px;
    background-color:#a1f496;
    font-size: 20px;
}

footer {
    color: white;
    padding-bottom: 20px;
}


JAVASCRIPT

const eNumero = (numero) => /^[0-9]+$/.test(numero);

const cepValido = (cep)=> cep.length == 8 && eNumero(cep);

const pesquisarCep = async ()=>{

const cep = document.getElementById('cep').value.replace('-','');
const url = `https://viacep.com.br/ws/${cep}/json/`;
if(cepValido(cep)){
    const dados = await fetch(url);
    const endereco = await dados.json();

    if(endereco.hasOwnProperty('erro')){

        document.getElementById('endereco').value = 'CEP não foi encontrado!'
    }else{

        preencherFormulario(endereco);
    }

}else{
    document.getElementById('endereco').value = 'CEP incorreto!';
}

}

const preencherFormulario = (endereco) =>{

document.getElementById('endereco').value = endereco.logradouro;
document.getElementById('bairro').value = endereco.bairro;
document.getElementById('cidade').value = endereco.localidade;
document.getElementById('estado').value = endereco.uf;

}

document.getElementById('cep').addEventListener('focusout', pesquisarCep)

function salvarDados(){

const cadastro = 'Cadastro'
const nome = document.getElementById('nome').value;
const email = document.getElementById('email').value;
const logradouro = document.getElementById('endereco').value;
const bairro = document.getElementById('bairro').value;
const localidade = document.getElementById('cidade').value;
const endereco = document.getElementById('estado').value;
const numero = document.getElementById('numero').value;
const cep = document.getElementById('cep').value;

var blob = new Blob([`${nome} - ${email} - ${logradouro} - ${bairro} - ${localidade} - ${endereco} - ${numero} - ${cep}`],
{type: 'text/plain: charset=utf-8'}
);

saveAs(blob, cadastro + '.txt');

limparFormulario();

}

document.getElementById('salvar').addEventListener('click', salvarDados)

function limparFormulario(){

document.getElementById('nome').value ='';
document.getElementById('email').value ='';
document.getElementById('endereco').value ='';
document.getElementById('bairro').value ='';
document.getElementById('cidade').value ='';
document.getElementById('estado').value ='';
document.getElementById('numero').value ='';
document.getElementById('cep').value ='';

}

Conclusão

Trabalhar com APIs em JavaScript é uma habilidade essencial para desenvolvedores web. Utilizando fetch, async e await, podemos fazer requisições HTTP de forma eficiente e tratar respostas de maneira adequada. Além disso, o tratamento de erros garante que nossas aplicações sejam robustas e resilientes. Com essas ferramentas, é possível criar aplicações dinâmicas e interativas que se comunicam eficazmente com serviços backend.

You May Also Like

Básico de Arrow Function em JavaScript

19 de January de 2024
função construtora

Função Construtora em JavaScript

19 de March de 2024

A Importância do Teste de Software com JavaScript

11 de February de 2024

26 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *