[{"data":1,"prerenderedAt":494},["ShallowReactive",2],{"pt-BR-article-\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api":3},{"id":4,"title":5,"articleCover":6,"articleCoverEmbed":7,"articleCoverEmbedUploadDate":7,"authorId":8,"body":9,"categoriesIds":484,"description":485,"enAlternateSlug":7,"extension":486,"meta":487,"navigation":350,"path":488,"ptBrAlternateSlug":7,"publishedAt":489,"seo":490,"sitemap":491,"stem":492,"updatedAt":489,"__hash__":493},"blog\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api.md","Como consumir uma API no JavaScript com a Fetch API","\u002Fimages\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api.webp",null,"thiago-nunes-batista",{"type":10,"value":11,"toc":478},"minimark",[12,24,27,32,41,45,48,304,307,311,314,330,393,397,400,409,412,431,434,437,474],[13,14,15,16,23],"p",{},"A Fetch API é uma interface nativa do JavaScript que permite realizar requisições HTTP sem a necessidade de instalar bibliotecas de código, como por exemplo, a ",[17,18,22],"a",{"href":19,"rel":20},"https:\u002F\u002Faxios-http.com\u002F",[21],"nofollow","biblioteca Axios",".",[13,25,26],{},"Neste artigo você vai aprender a utilizar a Fetch API através de exemplos práticos somente com HTML e JavaScript.",[28,29,31],"h2",{"id":30},"api","API",[13,33,34,35,40],{},"Foi escolhido uma ",[17,36,39],{"href":37,"rel":38},"https:\u002F\u002Frickandmortyapi.com\u002F",[21],"API gratuita"," com a temática do desenho animado \"Ricky and Morty\" que nos permitirá carregar dados de um endpoint real.",[28,42,44],{"id":43},"html","HTML",[13,46,47],{},"Para o exemplo desse artigo, teremos a seguinte estrutura HTML:",[49,50,54],"pre",{"className":51,"code":52,"language":43,"meta":53,"style":53},"language-html shiki shiki-themes dracula","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n    \u003Ctitle>Como consumir uma API no JavaScript com a Fetch API\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cbutton id=\"load-from-api\">Carregar dados\u003C\u002Fbutton>\n    \u003Cbutton id=\"load-all-characters\">Carregar todos os personagens\u003C\u002Fbutton>\n    \u003Cscript src=\".\u002Fapp.js\">\u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","",[55,56,57,77,103,114,138,171,186,196,206,233,258,285,294],"code",{"__ignoreMap":53},[58,59,62,66,70,74],"span",{"class":60,"line":61},"line",1,[58,63,65],{"class":64},"sCdxs","\u003C!",[58,67,69],{"class":68},"s0Tla","DOCTYPE",[58,71,73],{"class":72},"sY_PY"," html",[58,75,76],{"class":64},">\n",[58,78,80,83,85,88,91,95,99,101],{"class":60,"line":79},2,[58,81,82],{"class":64},"\u003C",[58,84,43],{"class":68},[58,86,87],{"class":72}," lang",[58,89,90],{"class":68},"=",[58,92,94],{"class":93},"seVfx","\"",[58,96,98],{"class":97},"s-mGx","en",[58,100,94],{"class":93},[58,102,76],{"class":64},[58,104,106,109,112],{"class":60,"line":105},3,[58,107,108],{"class":64},"  \u003C",[58,110,111],{"class":68},"head",[58,113,76],{"class":64},[58,115,117,120,123,126,128,130,133,135],{"class":60,"line":116},4,[58,118,119],{"class":64},"    \u003C",[58,121,122],{"class":68},"meta",[58,124,125],{"class":72}," charset",[58,127,90],{"class":68},[58,129,94],{"class":93},[58,131,132],{"class":97},"UTF-8",[58,134,94],{"class":93},[58,136,137],{"class":64}," \u002F>\n",[58,139,141,143,145,148,150,152,155,157,160,162,164,167,169],{"class":60,"line":140},5,[58,142,119],{"class":64},[58,144,122],{"class":68},[58,146,147],{"class":72}," name",[58,149,90],{"class":68},[58,151,94],{"class":93},[58,153,154],{"class":97},"viewport",[58,156,94],{"class":93},[58,158,159],{"class":72}," content",[58,161,90],{"class":68},[58,163,94],{"class":93},[58,165,166],{"class":97},"width=device-width, initial-scale=1.0",[58,168,94],{"class":93},[58,170,137],{"class":64},[58,172,174,176,179,182,184],{"class":60,"line":173},6,[58,175,119],{"class":64},[58,177,178],{"class":68},"title",[58,180,181],{"class":64},">Como consumir uma API no JavaScript com a Fetch API\u003C\u002F",[58,183,178],{"class":68},[58,185,76],{"class":64},[58,187,189,192,194],{"class":60,"line":188},7,[58,190,191],{"class":64},"  \u003C\u002F",[58,193,111],{"class":68},[58,195,76],{"class":64},[58,197,199,201,204],{"class":60,"line":198},8,[58,200,108],{"class":64},[58,202,203],{"class":68},"body",[58,205,76],{"class":64},[58,207,209,211,214,217,219,221,224,226,229,231],{"class":60,"line":208},9,[58,210,119],{"class":64},[58,212,213],{"class":68},"button",[58,215,216],{"class":72}," id",[58,218,90],{"class":68},[58,220,94],{"class":93},[58,222,223],{"class":97},"load-from-api",[58,225,94],{"class":93},[58,227,228],{"class":64},">Carregar dados\u003C\u002F",[58,230,213],{"class":68},[58,232,76],{"class":64},[58,234,236,238,240,242,244,246,249,251,254,256],{"class":60,"line":235},10,[58,237,119],{"class":64},[58,239,213],{"class":68},[58,241,216],{"class":72},[58,243,90],{"class":68},[58,245,94],{"class":93},[58,247,248],{"class":97},"load-all-characters",[58,250,94],{"class":93},[58,252,253],{"class":64},">Carregar todos os personagens\u003C\u002F",[58,255,213],{"class":68},[58,257,76],{"class":64},[58,259,261,263,266,269,271,273,276,278,281,283],{"class":60,"line":260},11,[58,262,119],{"class":64},[58,264,265],{"class":68},"script",[58,267,268],{"class":72}," src",[58,270,90],{"class":68},[58,272,94],{"class":93},[58,274,275],{"class":97},".\u002Fapp.js",[58,277,94],{"class":93},[58,279,280],{"class":64},">\u003C\u002F",[58,282,265],{"class":68},[58,284,76],{"class":64},[58,286,288,290,292],{"class":60,"line":287},12,[58,289,191],{"class":64},[58,291,203],{"class":68},[58,293,76],{"class":64},[58,295,297,300,302],{"class":60,"line":296},13,[58,298,299],{"class":64},"\u003C\u002F",[58,301,43],{"class":68},[58,303,76],{"class":64},[13,305,306],{},"É uma marcação de conteúdo simples, dentro da tag Body se tem dois botões nos quais vamos adicionar eventos de \"click\" no arquivo app.js que é importado logo abaixo os botões nesse código HTML.",[28,308,310],{"id":309},"javascript","JavaScript",[13,312,313],{},"Dentro do arquivo app.js, será realizado os seguintes passos:",[315,316,317,321,324,327],"ol",{},[318,319,320],"li",{},"Capturar o elemento da DOM com id \"load-from-api\" e armazenar em uma variável chamada loadDataBtn.",[318,322,323],{},"Obter a tag HTML da DOM com o id \"load-all-characters\"",[318,325,326],{},"Armazenar a Url da Api do \"Rick and Morty\" em uma variável chamada \"BASE_URL\"",[318,328,329],{},"Adicionar o \"listener\" de evento de click no elemento \"loadDataBtn\" e \"loadAllCharactersBtn\"",[49,331,334],{"className":332,"code":333,"language":309,"meta":53,"style":53},"language-javascript shiki shiki-themes dracula","const loadDataBtn = document.getElementById(\"load-from-api\");\nconst loadAllCharactersBtn = document.getElementById(\"load-all-characters\");\n\nconst BASE_URL = \"https:\u002F\u002Frickandmortyapi.com\u002Fapi\u002Fcharacter\";\n\nloadDataBtn.addEventListener(\"click\", () => {\n  \u002F\u002F Algum código aqui\n});\n\nloadAllCharactersBtn.addEventListener(\"click\", () => {\n  \u002F\u002F Algum código aqui\n});\n",[55,335,336,341,346,352,357,361,366,371,376,380,385,389],{"__ignoreMap":53},[58,337,338],{"class":60,"line":61},[58,339,340],{},"const loadDataBtn = document.getElementById(\"load-from-api\");\n",[58,342,343],{"class":60,"line":79},[58,344,345],{},"const loadAllCharactersBtn = document.getElementById(\"load-all-characters\");\n",[58,347,348],{"class":60,"line":105},[58,349,351],{"emptyLinePlaceholder":350},true,"\n",[58,353,354],{"class":60,"line":116},[58,355,356],{},"const BASE_URL = \"https:\u002F\u002Frickandmortyapi.com\u002Fapi\u002Fcharacter\";\n",[58,358,359],{"class":60,"line":140},[58,360,351],{"emptyLinePlaceholder":350},[58,362,363],{"class":60,"line":173},[58,364,365],{},"loadDataBtn.addEventListener(\"click\", () => {\n",[58,367,368],{"class":60,"line":188},[58,369,370],{},"  \u002F\u002F Algum código aqui\n",[58,372,373],{"class":60,"line":198},[58,374,375],{},"});\n",[58,377,378],{"class":60,"line":208},[58,379,351],{"emptyLinePlaceholder":350},[58,381,382],{"class":60,"line":235},[58,383,384],{},"loadAllCharactersBtn.addEventListener(\"click\", () => {\n",[58,386,387],{"class":60,"line":260},[58,388,370],{},[58,390,391],{"class":60,"line":287},[58,392,375],{},[28,394,396],{"id":395},"carregando-dados-da-api-com-a-fetch-api","Carregando dados da Api com a Fetch Api",[13,398,399],{},"Vamos trabalhar dentro da função que é executada ao clicar no elemento com id \"load-from-api\", mas antes disso é necessário salientar que a Fetch API retorna uma Promise, na qual podemos lidar com ela de duas formas:",[401,402,403,406],"ul",{},[318,404,405],{},"Utilizando Async\u002FAwait",[318,407,408],{},"Utilizando a forma tradicional de lidar com Promises com o \".then\"",[13,410,411],{},"Vamos utilizar o Async\u002FAwait, onde o async será colocado antes da função que lida com o evento de Click e o Await é colocado antes da chamada da Fetch Api:",[49,413,415],{"className":332,"code":414,"language":309,"meta":53,"style":53},"loadAllCharactersBtn.addEventListener(\"click\", async () => {\n  const apiResponse = await fetch(BASE_URL);\n});\n",[55,416,417,422,427],{"__ignoreMap":53},[58,418,419],{"class":60,"line":61},[58,420,421],{},"loadAllCharactersBtn.addEventListener(\"click\", async () => {\n",[58,423,424],{"class":60,"line":79},[58,425,426],{},"  const apiResponse = await fetch(BASE_URL);\n",[58,428,429],{"class":60,"line":105},[58,430,375],{},[13,432,433],{},"Quando se está trabalhando com a Fetch Api, também se faz necessário tratar os dados retornos da API. Nesse exemplo a API retorna JSON, então precisamos tratar o dado como JSON. Importante observar que a função no JavaScript para tratar dados em JSON também retorna uma Promise, por esse motivo também se faz necessário utilizar o await.",[13,435,436],{},"No exemplo foi executado os passos acima mencionados e o dado já preparado para utilização dentro do código JavaScript foi armazenado na variável: \"parsedResponse\".",[49,438,440],{"className":332,"code":439,"language":309,"meta":53,"style":53},"loadDataBtn.addEventListener(\"click\", async () => {\n  const apiResponse = await fetch(BASE_URL);\n  const parsedResponse = await apiResponse.json();\n\n  console.log(\"parsedResponse\");\n  console.log(parsedResponse);\n});\n",[55,441,442,447,451,456,460,465,470],{"__ignoreMap":53},[58,443,444],{"class":60,"line":61},[58,445,446],{},"loadDataBtn.addEventListener(\"click\", async () => {\n",[58,448,449],{"class":60,"line":79},[58,450,426],{},[58,452,453],{"class":60,"line":105},[58,454,455],{},"  const parsedResponse = await apiResponse.json();\n",[58,457,458],{"class":60,"line":116},[58,459,351],{"emptyLinePlaceholder":350},[58,461,462],{"class":60,"line":140},[58,463,464],{},"  console.log(\"parsedResponse\");\n",[58,466,467],{"class":60,"line":173},[58,468,469],{},"  console.log(parsedResponse);\n",[58,471,472],{"class":60,"line":188},[58,473,375],{},[475,476,477],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .sY_PY, html code.shiki .sY_PY{--shiki-default:#50FA7B;--shiki-default-font-style:italic}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}",{"title":53,"searchDepth":79,"depth":79,"links":479},[480,481,482,483],{"id":30,"depth":79,"text":31},{"id":43,"depth":79,"text":44},{"id":309,"depth":79,"text":310},{"id":395,"depth":79,"text":396},[309],"Aprenda a utilizar a Fetch API do JavaScript para consumir uma API real sem bibliotecas extras, com exemplos práticos detalhados em HTML e JavaScript.","md",{},"\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api","2024-09-05",{"title":5,"description":485},{"loc":488,"lastmod":489},"blog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api","Not-V-WLQnpFXxYT7kMNuPx3KiCEzv-59OLGNa1Bll4",1791033063006]