{"id":1072,"date":"2024-06-15T12:13:43","date_gmt":"2024-06-15T15:13:43","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=1072"},"modified":"2024-06-15T12:58:52","modified_gmt":"2024-06-15T15:58:52","slug":"trabalhando-com-api-em-javascript","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=1072","title":{"rendered":"Trabalhando com API em JavaScript com M\u00e9todo Fetch"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>No desenvolvimento web moderno, o uso de APIs (Application Programming Interfaces) se tornou fundamental para criar aplica\u00e7\u00f5es din\u00e2micas e interativas. JavaScript, sendo uma das linguagens de programa\u00e7\u00e3o mais populares, oferece diversas ferramentas e m\u00e9todos para trabalhar com APIs de maneira eficiente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 uma API?<\/h2>\n\n\n\n<p>Uma API, ou Interface de Programa\u00e7\u00e3o de Aplica\u00e7\u00f5es, \u00e9 um conjunto de regras que permite que diferentes sistemas de software se comuniquem entre si. No contexto do desenvolvimento web, APIs frequentemente s\u00e3o usadas para permitir que um frontend (a parte vis\u00edvel de uma aplica\u00e7\u00e3o) se comunique com um backend (a parte oculta que processa dados e l\u00f3gica de neg\u00f3cios).<\/p>\n\n\n\n<p>Uma das maneiras mais comuns de fazer requisi\u00e7\u00f5es HTTP em JavaScript \u00e9 utilizando a fun\u00e7\u00e3o fetch. Introduzida no ECMAScript 6, fetch oferece uma interface moderna e flex\u00edvel para trabalhar com APIs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Exemplo<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"393\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/06\/image.png\" alt=\"\" class=\"wp-image-1073\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/06\/image.png 782w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/06\/image-300x151.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/06\/image-768x386.png 768w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Neste exemplo, fazemos uma requisi\u00e7\u00e3o GET para a URL da API. Utilizamos fetch para obter a resposta, convertemos a resposta para JSON e ent\u00e3o manipulamos os dados recebidos. Caso ocorra um erro, ele \u00e9 capturado e exibido no console.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tratamento de Erros<\/h2>\n\n\n\n<p>O tratamento de erros \u00e9 essencial ao trabalhar com APIs para garantir que a aplica\u00e7\u00e3o lida corretamente com situa\u00e7\u00f5es inesperadas, como falhas de rede ou respostas inv\u00e1lidas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Exemplo<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"868\" height=\"451\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/06\/image-1.png\" alt=\"\" class=\"wp-image-1074\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/06\/image-1.png 868w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/06\/image-1-300x156.png 300w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/06\/image-1-768x399.png 768w\" sizes=\"(max-width: 868px) 100vw, 868px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Exemplo Pr\u00e1tico <\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Trabalhando com API em JavaScript Com M\u00e9todo Fetch\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/eG7oldQVFTc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>HTML<\/strong>\n\n\n&lt;!DOCTYPE html&gt;\n&lt;html lang=\"pt-br\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;link rel=\"stylesheet\" href=\".\/css\/style.css\"&gt;    \n    &lt;script src=\".\/js\/script.js\" type='module' &gt;&lt;\/script&gt;\n    &lt;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\"&gt;&lt;\/script&gt;\n    \n    &lt;title&gt;Estudo de API com JavaScript&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;main class=\"container\"&gt;\n        &lt;h1 class=\"title\"&gt;Sistema de Cadastro&lt;\/h1&gt;\n        &lt;div class=\"row\"&gt;\n            &lt;div class=\"inputbox\"&gt;\n                &lt;input type=\"text\" id=\"nome\" required&gt;\n                &lt;label for=\"nome\"&gt;Nome&lt;\/label&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"inputbox\"&gt;\n                &lt;input type=\"text\" id=\"email\"  required&gt;\n                &lt;label for=\"email\"&gt;Email&lt;\/label&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"row\"&gt;\n            &lt;div class=\"inputbox\"&gt;\n                &lt;input type=\"text\" id=\"cep\"  required&gt; \n                &lt;label for=\"cep\"&gt;CEP&lt;\/label&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"inputbox\"&gt;\n                &lt;input type=\"text\" id=\"endereco\"  required&gt;\n                &lt;label for=\"endereco\"&gt;Endere\u00e7o&lt;\/label&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"inputbox\"&gt;\n                &lt;input type=\"text\" id=\"numero\"  required&gt;\n                &lt;label for=\"numero\"&gt;N\u00famero&lt;\/label&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"row\"&gt;\n            &lt;div class=\"inputbox\"&gt;\n                &lt;input type=\"text\" id=\"bairro\"  required&gt;\n                &lt;label for=\"bairro\"&gt;Bairro&lt;\/label&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"inputbox\"&gt;\n                &lt;input type=\"text\" id=\"cidade\"  required&gt;\n                &lt;label for=\"cidade\"&gt;Cidade&lt;\/label&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"inputbox\"&gt;\n                &lt;input type=\"text\" id=\"estado\"  required&gt;\n                &lt;label for=\"estado\"&gt;Estado&lt;\/label&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"row\"&gt;\n            &lt;button id=\"salvar\"&gt;Salvar&lt;\/button&gt;\n        &lt;\/div&gt;\n    &lt;\/main&gt;\n    &lt;footer&gt;\n        Aula de API &amp;#169 2024\n    &lt;\/footer&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n\n<strong>CSS<\/strong>\n\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Poppins', sans-serif;\n}\n\nbody {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    min-height: 100vh;\n    background-color: rgb(4, 49, 123);\n}\n\n.container {\n    flex-grow: 3;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    width: 80%;\n    padding: 20px;\n    gap: 40px;\n}\n\n.title {\n    font-size: 40px;\n    text-align: center;    \n    color: #fff;\n}\n\n.row {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 40px;\n}\nlabel{\n\n    color: white;\n}\n\n.inputbox {\n    position: relative;\n    display: flex;\n    flex-direction: column-reverse;\n    height: 40px;\n   \n}\n\n.inputbox input {    \n    background-color: #f2e48e;   \n}\n\nbutton {\n    cursor: pointer;\n    justify-self: center;\n    width: 200px;\n    height: 50px;\n    background-color:#a1f496;\n    font-size: 20px;\n}\n\nfooter {\n    color: white;\n    padding-bottom: 20px;\n}\n\n\n<strong>JAVASCRIPT\n<\/strong>\nconst eNumero = (numero) =&gt; \/^&#91;0-9]+$\/.test(numero);\n\nconst cepValido = (cep)=&gt; cep.length == 8 &amp;&amp; eNumero(cep);\n\nconst pesquisarCep = async ()=&gt;{\n\nconst cep = document.getElementById('cep').value.replace('-','');\nconst url = `https:\/\/viacep.com.br\/ws\/${cep}\/json\/`;\nif(cepValido(cep)){\n    const dados = await fetch(url);\n    const endereco = await dados.json();\n\n    if(endereco.hasOwnProperty('erro')){\n\n        document.getElementById('endereco').value = 'CEP n\u00e3o foi encontrado!'\n    }else{\n\n        preencherFormulario(endereco);\n    }\n\n}else{\n    document.getElementById('endereco').value = 'CEP incorreto!';\n}\n\n}\n\nconst preencherFormulario = (endereco) =&gt;{\n\ndocument.getElementById('endereco').value = endereco.logradouro;\ndocument.getElementById('bairro').value = endereco.bairro;\ndocument.getElementById('cidade').value = endereco.localidade;\ndocument.getElementById('estado').value = endereco.uf;\n\n}\n\ndocument.getElementById('cep').addEventListener('focusout', pesquisarCep)\n\nfunction salvarDados(){\n\nconst cadastro = 'Cadastro'\nconst nome = document.getElementById('nome').value;\nconst email = document.getElementById('email').value;\nconst logradouro = document.getElementById('endereco').value;\nconst bairro = document.getElementById('bairro').value;\nconst localidade = document.getElementById('cidade').value;\nconst endereco = document.getElementById('estado').value;\nconst numero = document.getElementById('numero').value;\nconst cep = document.getElementById('cep').value;\n\nvar blob = new Blob(&#91;`${nome} - ${email} - ${logradouro} - ${bairro} - ${localidade} - ${endereco} - ${numero} - ${cep}`],\n{type: 'text\/plain: charset=utf-8'}\n);\n\nsaveAs(blob, cadastro + '.txt');\n\nlimparFormulario();\n\n}\n\ndocument.getElementById('salvar').addEventListener('click', salvarDados)\n\nfunction limparFormulario(){\n\ndocument.getElementById('nome').value ='';\ndocument.getElementById('email').value ='';\ndocument.getElementById('endereco').value ='';\ndocument.getElementById('bairro').value ='';\ndocument.getElementById('cidade').value ='';\ndocument.getElementById('estado').value ='';\ndocument.getElementById('numero').value ='';\ndocument.getElementById('cep').value ='';\n\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Trabalhar com APIs em JavaScript \u00e9 uma habilidade essencial para desenvolvedores web. Utilizando fetch, async e await, podemos fazer requisi\u00e7\u00f5es HTTP de forma eficiente e tratar respostas de maneira adequada. Al\u00e9m disso, o tratamento de erros garante que nossas aplica\u00e7\u00f5es sejam robustas e resilientes. Com essas ferramentas, \u00e9 poss\u00edvel criar aplica\u00e7\u00f5es din\u00e2micas e interativas que se comunicam eficazmente com servi\u00e7os backend.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>No desenvolvimento web moderno, o uso de APIs (Application Programming Interfaces) se tornou fundamental para criar aplica\u00e7\u00f5es din\u00e2micas e interativas. JavaScript, sendo uma das linguagens de programa\u00e7\u00e3o mais populares, oferece diversas ferramentas e m\u00e9todos para trabalhar com APIs de maneira eficiente. O que \u00e9 uma API? Uma API, ou Interface de Programa\u00e7\u00e3o de Aplica\u00e7\u00f5es, \u00e9 um conjunto de regras que permite que diferentes sistemas de software se comuniquem entre si. No contexto do desenvolvimento web, APIs frequentemente s\u00e3o usadas para permitir que um frontend (a parte vis\u00edvel de uma aplica\u00e7\u00e3o) se comunique com um backend (a parte oculta que processa dados e l\u00f3gica de neg\u00f3cios). Uma das maneiras mais comuns de fazer requisi\u00e7\u00f5es HTTP em JavaScript \u00e9 utilizando a fun\u00e7\u00e3o fetch. Introduzida no ECMAScript 6, fetch oferece uma interface moderna e flex\u00edvel para trabalhar com APIs. Exemplo Neste exemplo, fazemos uma requisi\u00e7\u00e3o GET para a URL da API. Utilizamos fetch para obter a resposta, convertemos a resposta para JSON e ent\u00e3o manipulamos os dados recebidos. Caso ocorra um erro, ele \u00e9 capturado e exibido no console. Tratamento de Erros O tratamento de erros \u00e9 essencial ao trabalhar com APIs para garantir que a aplica\u00e7\u00e3o lida corretamente com situa\u00e7\u00f5es inesperadas, como falhas de rede ou respostas inv\u00e1lidas. Exemplo Exemplo Pr\u00e1tico Conclus\u00e3o Trabalhar com APIs em JavaScript \u00e9 uma habilidade essencial para desenvolvedores web. Utilizando fetch, async e await, podemos fazer requisi\u00e7\u00f5es HTTP de forma eficiente e tratar respostas de maneira adequada. Al\u00e9m disso, o tratamento de erros garante que nossas aplica\u00e7\u00f5es sejam robustas e resilientes. Com essas ferramentas, \u00e9 poss\u00edvel criar aplica\u00e7\u00f5es din\u00e2micas e interativas que se comunicam eficazmente com servi\u00e7os backend.<\/p>\n","protected":false},"author":1,"featured_media":1075,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1072"}],"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=1072"}],"version-history":[{"count":7,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1072\/revisions"}],"predecessor-version":[{"id":1082,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1072\/revisions\/1082"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/1075"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}