{"id":2294,"date":"2026-08-06T17:49:41","date_gmt":"2026-08-06T20:49:41","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2294"},"modified":"2026-08-06T18:32:37","modified_gmt":"2026-08-06T21:32:37","slug":"o-que-e-uma-api-aprenda-na-pratica-consumindo-a-api-viacep-com-javascript","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2294","title":{"rendered":"O que \u00e9 uma API? Aprenda na Pr\u00e1tica Consumindo a API ViaCEP com JavaScript"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Voc\u00ea j\u00e1 percebeu que alguns sites preenchem o endere\u00e7o automaticamente quando digitamos um CEP?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Esse recurso est\u00e1 presente em lojas virtuais, sistemas de cadastro, aplicativos de entrega e diversos outros servi\u00e7os que utilizamos diariamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mas como isso acontece?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ser\u00e1 que o endere\u00e7o j\u00e1 est\u00e1 salvo dentro do site?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A resposta \u00e9 <strong>n\u00e3o<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando digitamos um CEP, o sistema faz uma consulta para um servidor na internet que possui uma <strong>API<\/strong>. Esse servidor retorna as informa\u00e7\u00f5es do endere\u00e7o no formato <strong>JSON<\/strong>, permitindo que nossa aplica\u00e7\u00e3o apresente esses dados automaticamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste artigo voc\u00ea aprender\u00e1 como funciona esse processo e desenvolver\u00e1 um pequeno projeto utilizando <strong>HTML<\/strong>, <strong>CSS<\/strong> e <strong>JavaScript<\/strong>, consumindo a API p\u00fablica do <strong>ViaCEP<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que voc\u00ea aprender\u00e1<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Ao finalizar este artigo voc\u00ea ser\u00e1 capaz de:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Entender o que \u00e9 uma API;<\/li>\n\n\n\n<li>Compreender como funciona uma API na nuvem;<\/li>\n\n\n\n<li>Entender o conceito de requisi\u00e7\u00e3o e resposta;<\/li>\n\n\n\n<li>Consumir uma API utilizando JavaScript;<\/li>\n\n\n\n<li>Trabalhar com JSON;<\/li>\n\n\n\n<li>Utilizar a fun\u00e7\u00e3o <code>fetch()<\/code>;<\/li>\n\n\n\n<li>Atualizar informa\u00e7\u00f5es na p\u00e1gina utilizando o DOM;<\/li>\n\n\n\n<li>Tratar erros durante uma requisi\u00e7\u00e3o.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que \u00e9 uma API?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">API \u00e9 a sigla para <strong>Application Programming Interface<\/strong> (Interface de Programa\u00e7\u00e3o de Aplica\u00e7\u00f5es).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apesar do nome parecer complicado, a ideia \u00e9 bastante simples.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma API funciona como uma ponte entre dois sistemas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine um restaurante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea n\u00e3o entra na cozinha para preparar sua comida.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea faz o pedido ao gar\u00e7om.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O gar\u00e7om leva o pedido at\u00e9 a cozinha.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A cozinha prepara o prato.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois o gar\u00e7om traz o pedido at\u00e9 voc\u00ea.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesse exemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Voc\u00ea \u00e9 a aplica\u00e7\u00e3o;<\/li>\n\n\n\n<li>O gar\u00e7om \u00e9 a API;<\/li>\n\n\n\n<li>A cozinha \u00e9 o servidor.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">A API recebe uma solicita\u00e7\u00e3o, conversa com o servidor e devolve uma resposta para quem fez o pedido.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que \u00e9 uma API na nuvem?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Uma API na nuvem \u00e9 exatamente a mesma ideia.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A diferen\u00e7a \u00e9 que ela est\u00e1 hospedada em um servidor conectado \u00e0 internet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso significa que qualquer aplica\u00e7\u00e3o autorizada pode utiliz\u00e1-la.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nosso computador envia uma solicita\u00e7\u00e3o pela internet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O servidor processa essa solicita\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois devolve uma resposta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 exatamente isso que acontece quando consultamos um CEP.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Como funciona a comunica\u00e7\u00e3o?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Quando digitamos um CEP, acontece o seguinte:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Usu\u00e1rio\n      \u2193\nNosso Sistema\n      \u2193\nInternet\n      \u2193\nAPI ViaCEP\n      \u2193\nServidor localiza o endere\u00e7o\n      \u2193\nResposta em JSON\n      \u2193\nNosso JavaScript\n      \u2193\nTela do usu\u00e1rio<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Observe que o endere\u00e7o n\u00e3o est\u00e1 salvo no nosso computador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele vem diretamente do servidor da API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por isso dizemos que estamos consumindo um servi\u00e7o dispon\u00edvel na nuvem.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Conhecendo a API ViaCEP<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O ViaCEP disponibiliza gratuitamente uma API para consulta de endere\u00e7os.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A URL possui o seguinte formato:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;viacep.com.br\/ws\/13484320\/json\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Onde:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>https:\/\/<\/code> indica que estamos utilizando uma conex\u00e3o segura;<\/li>\n\n\n\n<li><code>viacep.com.br<\/code> \u00e9 o servidor da API;<\/li>\n\n\n\n<li><code>ws<\/code> representa o servi\u00e7o disponibilizado;<\/li>\n\n\n\n<li><code>13484320<\/code> \u00e9 o CEP pesquisado;<\/li>\n\n\n\n<li><code>json<\/code> informa que desejamos receber a resposta no formato JSON.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Sempre que alterarmos o CEP na URL, receberemos um endere\u00e7o diferente.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que \u00e9 JSON?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">JSON significa <strong>JavaScript Object Notation<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 um formato utilizado para troca de informa\u00e7\u00f5es entre sistemas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ao consultar o ViaCEP, recebemos algo parecido com isto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"cep\": \"13484-320\",\n    \"logradouro\": \"Rua Exemplo\",\n    \"bairro\": \"Centro\",\n    \"localidade\": \"Limeira\",\n    \"uf\": \"SP\",\n    \"ddd\": \"19\"\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Observe que cada informa\u00e7\u00e3o possui um nome e um valor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nosso JavaScript consegue acessar cada propriedade individualmente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>dados.logradouro<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">ou<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>dados.localidade<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Como consumir uma API utilizando JavaScript<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">O JavaScript possui uma fun\u00e7\u00e3o chamada <strong>fetch()<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ela \u00e9 utilizada para fazer requisi\u00e7\u00f5es para servidores.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um exemplo simples \u00e9:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const resposta = await fetch(url);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Depois convertemos a resposta para JSON.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const dados = await resposta.json();<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agora podemos acessar todas as informa\u00e7\u00f5es retornadas pela API.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Estrutura do projeto<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Nosso projeto ser\u00e1 composto por tr\u00eas arquivos.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>index.html\n\nstyle.css\n\nscript.js<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O usu\u00e1rio informa um CEP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O JavaScript consulta a API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os dados retornam em JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois atualizamos a p\u00e1gina automaticamente.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Tratando erros<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Nem sempre tudo acontece como esperamos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Algumas situa\u00e7\u00f5es precisam ser tratadas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CEP incompleto;<\/li>\n\n\n\n<li>CEP inexistente;<\/li>\n\n\n\n<li>Usu\u00e1rio sem internet;<\/li>\n\n\n\n<li>Erro no servidor.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Uma aplica\u00e7\u00e3o profissional sempre informa ao usu\u00e1rio quando algo deu errado.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Onde encontramos APIs no dia a dia?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Mesmo sem perceber, utilizamos APIs praticamente todos os dias.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Alguns exemplos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Consulta de CEP;<\/li>\n\n\n\n<li>Previs\u00e3o do tempo;<\/li>\n\n\n\n<li>Google Maps;<\/li>\n\n\n\n<li>Aplicativos de transporte;<\/li>\n\n\n\n<li>Bancos digitais;<\/li>\n\n\n\n<li>Redes sociais;<\/li>\n\n\n\n<li>Lojas virtuais;<\/li>\n\n\n\n<li>Sistemas de pagamento.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Quase toda aplica\u00e7\u00e3o moderna utiliza uma ou mais APIs.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Conclus\u00e3o<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Neste artigo voc\u00ea aprendeu o conceito de API de forma pr\u00e1tica, entendendo como uma aplica\u00e7\u00e3o pode consultar um servi\u00e7o hospedado na nuvem para obter informa\u00e7\u00f5es em tempo real.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizando a API p\u00fablica do ViaCEP vimos como funciona a comunica\u00e7\u00e3o entre cliente e servidor, conhecemos o formato JSON e demos o primeiro passo para desenvolver aplica\u00e7\u00f5es que utilizam servi\u00e7os externos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse \u00e9 um dos conceitos mais importantes para qualquer desenvolvedor Web, pois praticamente todos os sistemas modernos dependem da integra\u00e7\u00e3o com APIs.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Pr\u00f3ximo passo<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">No pr\u00f3ximo projeto vamos utilizar outra API p\u00fablica para consultar informa\u00e7\u00f5es em tempo real e continuar explorando o desenvolvimento de aplica\u00e7\u00f5es conectadas \u00e0 nuvem.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea j\u00e1 percebeu que alguns sites preenchem o endere\u00e7o automaticamente quando digitamos um CEP? Esse recurso est\u00e1 presente em lojas virtuais, sistemas de cadastro, aplicativos de entrega e diversos outros servi\u00e7os que utilizamos diariamente. Mas como isso acontece? Ser\u00e1 que o endere\u00e7o j\u00e1 est\u00e1 salvo dentro do site? A resposta \u00e9 n\u00e3o. Quando digitamos um CEP, o sistema faz uma consulta para um servidor na internet que possui uma API. Esse servidor retorna as informa\u00e7\u00f5es do endere\u00e7o no formato JSON, permitindo que nossa aplica\u00e7\u00e3o apresente esses dados automaticamente. Neste artigo voc\u00ea aprender\u00e1 como funciona esse processo e desenvolver\u00e1 um pequeno projeto utilizando HTML, CSS e JavaScript, consumindo a API p\u00fablica do ViaCEP. O que voc\u00ea aprender\u00e1 Ao finalizar este artigo voc\u00ea ser\u00e1 capaz de: O que \u00e9 uma API? API \u00e9 a sigla para Application Programming Interface (Interface de Programa\u00e7\u00e3o de Aplica\u00e7\u00f5es). Apesar do nome parecer complicado, a ideia \u00e9 bastante simples. Uma API funciona como uma ponte entre dois sistemas. Imagine um restaurante. Voc\u00ea n\u00e3o entra na cozinha para preparar sua comida. Voc\u00ea faz o pedido ao gar\u00e7om. O gar\u00e7om leva o pedido at\u00e9 a cozinha. A cozinha prepara o prato. Depois o gar\u00e7om traz o pedido at\u00e9 voc\u00ea. Nesse exemplo: A API recebe uma solicita\u00e7\u00e3o, conversa com o servidor e devolve uma resposta para quem fez o pedido. O que \u00e9 uma API na nuvem? Uma API na nuvem \u00e9 exatamente a mesma ideia. A diferen\u00e7a \u00e9 que ela est\u00e1 hospedada em um servidor conectado \u00e0 internet. Isso significa que qualquer aplica\u00e7\u00e3o autorizada pode utiliz\u00e1-la. Nosso computador envia uma solicita\u00e7\u00e3o pela internet. O servidor processa essa solicita\u00e7\u00e3o. Depois devolve uma resposta. \u00c9 exatamente isso que acontece quando consultamos um CEP. Como funciona a comunica\u00e7\u00e3o? Quando digitamos um CEP, acontece o seguinte: Observe que o endere\u00e7o n\u00e3o est\u00e1 salvo no nosso computador. Ele vem diretamente do servidor da API. Por isso dizemos que estamos consumindo um servi\u00e7o dispon\u00edvel na nuvem. Conhecendo a API ViaCEP O ViaCEP disponibiliza gratuitamente uma API para consulta de endere\u00e7os. A URL possui o seguinte formato: Onde: Sempre que alterarmos o CEP na URL, receberemos um endere\u00e7o diferente. O que \u00e9 JSON? JSON significa JavaScript Object Notation. \u00c9 um formato utilizado para troca de informa\u00e7\u00f5es entre sistemas. Ao consultar o ViaCEP, recebemos algo parecido com isto: Observe que cada informa\u00e7\u00e3o possui um nome e um valor. Nosso JavaScript consegue acessar cada propriedade individualmente. Por exemplo: ou Como consumir uma API utilizando JavaScript O JavaScript possui uma fun\u00e7\u00e3o chamada fetch(). Ela \u00e9 utilizada para fazer requisi\u00e7\u00f5es para servidores. Um exemplo simples \u00e9: Depois convertemos a resposta para JSON. Agora podemos acessar todas as informa\u00e7\u00f5es retornadas pela API. Estrutura do projeto Nosso projeto ser\u00e1 composto por tr\u00eas arquivos. O usu\u00e1rio informa um CEP. O JavaScript consulta a API. Os dados retornam em JSON. Depois atualizamos a p\u00e1gina automaticamente. Tratando erros Nem sempre tudo acontece como esperamos. Algumas situa\u00e7\u00f5es precisam ser tratadas. Por exemplo: Uma aplica\u00e7\u00e3o profissional sempre informa ao usu\u00e1rio quando algo deu errado. Onde encontramos APIs no dia a dia? Mesmo sem perceber, utilizamos APIs praticamente todos os dias. Alguns exemplos: Quase toda aplica\u00e7\u00e3o moderna utiliza uma ou mais APIs. Conclus\u00e3o Neste artigo voc\u00ea aprendeu o conceito de API de forma pr\u00e1tica, entendendo como uma aplica\u00e7\u00e3o pode consultar um servi\u00e7o hospedado na nuvem para obter informa\u00e7\u00f5es em tempo real. Utilizando a API p\u00fablica do ViaCEP vimos como funciona a comunica\u00e7\u00e3o entre cliente e servidor, conhecemos o formato JSON e demos o primeiro passo para desenvolver aplica\u00e7\u00f5es que utilizam servi\u00e7os externos. Esse \u00e9 um dos conceitos mais importantes para qualquer desenvolvedor Web, pois praticamente todos os sistemas modernos dependem da integra\u00e7\u00e3o com APIs. Pr\u00f3ximo passo No pr\u00f3ximo projeto vamos utilizar outra API p\u00fablica para consultar informa\u00e7\u00f5es em tempo real e continuar explorando o desenvolvimento de aplica\u00e7\u00f5es conectadas \u00e0 nuvem.<\/p>\n","protected":false},"author":1,"featured_media":2296,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-2294","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2294"}],"version-history":[{"count":4,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2294\/revisions"}],"predecessor-version":[{"id":2300,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2294\/revisions\/2300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2296"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}