--- title: "Fetch API em JavaScript: Tudo o que Você Precisa Saber" slug: fetch-api-in-javascript date: 2025-02-04T11:20:03+00:00 modified: 2025-09-16T16:37:42+00:00 permalink: https://brightdata.com.br/blog/dados-do-site/fetch-api-in-javascript type: blog --- [ Blog ](https://brightdata.com.br/blog "Blog") / [Dados do site](https://brightdata.com.br/blog/dados-do-site) [Dados do site](https://brightdata.com.br/blog/dados-do-site) # Fetch API em JavaScript: Tudo o que Você Precisa Saber Aprenda como a Fetch API simplifica as requisições HTTP em JavaScript com uma sintaxe baseada em promises e tratamento eficiente de erros. 13 min de leitura [ ![White number one with a flame on top.](https://media.brightdata.com.br/2023/03/Favicon-2-1-50x50.png) ](https://brightdata.com/blog/authors/jakkie-koekemoer) [Jakkie Koekemoer ](https://brightdata.com/blog/authors/jakkie-koekemoer) ![Fetch API in JavaScript blog image](https://media.brightdata.com.br/2025/02/Fetch-API-in-JavaScript-blog-image.svg) A [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) é uma interface moderna em JavaScript que simplifica as requisições HTTP com sua sintaxe baseada em promises, tornando seu código mais limpo e fácil de usar. Com a Fetch API, você pode solicitar dados do servidor sem precisar recarregar a página inteira, tornando sua aplicação mais rápida e interativa. Você pode facilmente enviar requisições GET, POST, PUT ou DELETE para interagir com diversas APIs. A Fetch API também torna simples o manuseio de diferentes tipos de dados e métodos HTTP. Personalizar cabeçalhos de requisição e gerenciar diferentes tipos de conteúdo se torna simples, permitindo que você trabalhe de forma integrada com diversos serviços. Neste artigo, você aprenderá como usar a Fetch API, seus benefícios para aplicações web e o uso de proxies para garantir um manuseio de dados seguro e eficiente. Confira esta [lista dos melhores provedores de proxy](https://brightdata.com.br/blog/proxies-101/best-proxy-providers) para entender por que a Bright Data é a melhor escolha. ## Compreensão da Fetch API A Fetch API é usada para fazer requisições HTTP assíncronas, enviando uma solicitação ao servidor e retornando uma [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) que é resolvida com os dados da resposta assim que estiverem disponíveis. No desenvolvimento em JavaScript, o uso da Fetch API permite a interação dinâmica com servidores por meio de requisições HTTP (*ou seja,* GET, POST, PUT), permitindo que as aplicações se comuniquem com o servidor sem a necessidade de recarregar a página. A seguir estão alguns dos benefícios da Fetch API: - **Sintaxe simplificada com promises:** A Fetch API elimina a complexidade do [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) ao usar promises, permitindo que você escreva um código mais limpo e legível. - **Vários formatos de dados são compatíveis:** Você pode usar os formatos JSON, texto e blob, o que facilita a análise e o trabalho com diferentes tipos de resposta. - **Objetos de fluxo e resposta são fornecidos:** Você pode examinar e modificar as respostas com fluxos legíveis, ajustando sua abordagem de recuperação de dados conforme a necessidade da sua aplicação. - **Melhor tratamento de erros:** Por padrão, o Fetch não gera um erro para códigos de status HTTP de erro, mas permite que você faça verificações de resposta mais explícitas. - **Callbacks menos complicados:** Você não precisa escrever muitos callbacks; em vez disso, pode usar `.then()`, `.catch()` ou `async/await` para saber quando as requisições são concluídas. Agora que você explorou os benefícios de usar a Fetch API, vamos analisar suas principais características e capacidades. ## Operações Assíncronas A Fetch API é assíncrona, e a promise é resolvida assim que a resposta do servidor estiver disponível. Dessa forma, você não bloqueia a interface para os seus usuários, proporcionando uma experiência mais fluida. Vamos explorar alguns exemplos. ### Requisição GET Aqui está um exemplo de como usar a Fetch API para enviar uma requisição GET: ```none fetch('https://jsonplaceholder.typicode.com/posts') .then((response) => { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } return response.json(); }) .then((data) => { console.log('Data fetched:', data); }) .catch((error) => { console.error('Fetch error:', error); }); ``` Neste trecho, a Fetch API obtém posts de `jsonplaceholder.typicode.com`. Verifica se a resposta está “Ok” usando `response.ok` e gera um erro caso contrário. Em seguida, ele analisa a resposta para JSON com `response.json()`. Todos os erros, seja por problemas de rede, respostas mal formadas ou falhas de análise, são tratados no bloco `.catch()` . ### Requisição POST Veja como usar a Fetch API para enviar uma requisição POST: ```none fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', headers: { 'Content-type': 'application/json; charset=UTF-8', }, body: JSON.stringify({ title: 'New Post', body: 'Hello World! This is a test.', userId: 1, }), }) .then((response) => { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } return response.json(); }) .then((data) => { console.log('New Post created:', data); }) .catch((error) => { console.error('Fetch error:', error); }); ``` Aqui, a Fetch API envia uma requisição para criar um novo recurso com o método POST. A requisição POST é semelhante à requisição GET, mas a requisição inclui cabeçalhos para informar ao servidor que a API está enviando dados em formato JSON. Os dados JSON reais ficam na chave de body. ## Integração com APIs Você pode usar a Fetch API para fazer requisições a APIs públicas ou privadas, como recuperar dados para gráficos, dashboards ou outras funcionalidades baseadas em dados. Ela permite que aplicações web se comuniquem com serviços externos usando seu fluxo baseado em promises para lidar com requisições e respostas. Aqui está um exemplo básico de como você poderia obter dados meteorológicos da [OpenWeatherMap API](https://openweathermap.org/): ```none const city = "London,uk"; const apiKey = "YOUR_API_KEY"; const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${apiKey}`; fetch(url) .then((response) => { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } return response.json(); }) .then((weatherData) => { console.log("Weather data for London:", weatherData); }) .catch((error) => { console.error("Error fetching weather data:", error); }); ``` > Substitua `YOUR_API_KEY` pela sua chave de API real. Este código recupera dados de clima para Londres usando a API da OpenWeather. O objeto `weatherData` inclui detalhes como temperatura, umidade e condições, que você pode integrar na sua interface de usuário (UI). Depois de executar este código no seu terminal ou shell (usando o comando `node filename.js`), você deverá ver uma saída como a seguinte: ```none Weather data for London: { coord: { lon: -0.1257, lat: 51.5085 }, weather: [ { id: 804, main: 'Clouds', description: 'overcast clouds', icon: '04d' } ], base: 'stations', main: { temp: 273.42, feels_like: 273.42, temp_min: 272.59, temp_max: 274.87, pressure: 1021, humidity: 87, sea_level: 1021, grnd_level: 1016 }, visibility: 10000, wind: { speed: 0.51, deg: 0 }, clouds: { all: 99 }, dt: 1736525048, sys: { type: 2, id: 268730, country: 'GB', sunrise: 1736496173, sunset: 1736525567 }, timezone: 0, id: 2643743, name: 'London', cod: 200 } ``` Aplicativos frequentemente precisam interagir com APIs externas para buscar dados de fontes externas. Portanto, usar uma abordagem limpa e consistente para integrar qualquer serviço externo é uma parte fundamental na construção de uma aplicação web escalável. ## Tratamento de Erros Comparado aos métodos antigos de AJAX, como XMLHttpRequest, que exigiam configurar múltiplos manipuladores de eventos para gerenciar erros de rede, o Fetch simplifica o tratamento de erros usando promises e um único bloco `.catch()` . O Fetch rejeita uma promise somente se ocorrer um erro de rede (*por exemplo,* sem conexão com a internet). Ele não gera um erro para códigos de erro HTTP como `404` ou `500`. Para verificar se um desses erros ocorreu, você precisa verificar manualmente `response.ok`. Se `response.ok` for `falso`, isso significa que o servidor respondeu com um status fora da faixa de 200 a 299. O exemplo a seguir mostra como o Fetch lida com erros quando uma requisição falha devido a um endpoint inválido: ```none fetch('https://jsonplaceholder.typicode.com/invalid-endpoint') .then((response) => { if (!response.ok) { throw new Error(`Failed to fetch. Status: ${response.status}`); } return response.json(); }) .then((data) => { console.log('This will not run if response is not ok'); }) .catch((error) => { console.error('Network or response error:', error.message); }); ``` Ao executar este código, você receberá uma mensagem de saída: `Network or response error: Failed to fetch (Erro de rede ou resposta: Falha ao buscar). Status: 404`. O código verifica `!response.ok` e gera um erro porque o endpoint não existe. ## Uso de Proxies com a Fetch API Proxies podem aprimorar as capacidades da Fetch API, fornecendo segurança adicional, escalabilidade e recursos de geolocalização. Proxies funcionam como intermediários entre o seu cliente e a internet, fornecendo endereços IP exclusivos, camadas adicionais de segurança e uma abordagem mais flexível para buscar recursos. Usar proxies com o Fetch pode ajudar a evitar que seu endereço IP seja bloqueado, proporcionando anonimato durante a extração de dados ou atividades de raspagem da web. Alguns outros benefícios do uso de Proxies incluem o seguinte: - **Segurança aprimorada:** Os proxies ocultam seu endereço IP, reduzindo o risco de sua IP ficar vulnerável a ataques maliciosos. - **Escalabilidade:** Proxies podem distribuir requisições por vários IPs, prevenindo limites de taxa ou bloqueios. - **Flexibilidade de geolocalização:** Proxies são usados para enviar requisições HTTP de diferentes locais, o que é útil para acessar conteúdo disponível apenas em regiões específicas. ### Tipos de Proxies Existem diferentes tipos de proxies, cada um atendendo a um caso de uso específico. Esses diferentes tipos de proxies são os seguintes: - **Proxies residenciais:** Esses proxies utilizam IPs de locais residenciais reais e são altamente confiáveis por sites, tornando-os mais caros, mas também mais eficazes caso os sites alvo bloqueiem tráfego de IPs de datacenters. - **Proxies rotativos:** Esses proxies rotacionam automaticamente os IPs a cada requisição ou sessão. Eles são ideais para extração de dados em grande escala quando você deseja reduzir o risco de atingir limites de servidor ou listas negras. - **Proxies de datacenter:** Esses proxies vêm de datacenters; são econômicos e oferecem alta velocidade, mas você pode ser bloqueado se usá-los com frequência. ### Proxies da Bright Data com Fetch API A Bright Data fornece [serviços avançados de proxy](https://brightdata.com.br/proxy-types) que se integram a aplicações baseadas em Fetch. Esses proxies permitem que você escolha entre opções [residenciais](https://brightdata.com.br/proxy-types/residential-proxies) ou de [datacenter](https://brightdata.com.br/proxy-types/datacenter-proxies), escalone suas capacidades de recuperação de dados para projetos em nível empresarial e se beneficie da rotação automática de IPs para uma coleta de dados eficiente e confiável. Veja como integrar os proxies da Bright Data com Fetch API: ```none import fetch from "node-fetch"; import { HttpsProxyAgent } from "https-proxy-agent"; const proxyHost = "BRIGHT_DATA_PROXY_HOST:PORT"; const proxyUsername = "BRIGHT_DATA_USERNAME"; const proxyPassword = "BRIGHT_DATA_PASSWORD"; const proxyUrl = `http://${proxyUsername}:${proxyPassword}@${proxyHost}`; const targetUrl = "https://jsonplaceholder.typicode.com/posts"; // Create a proxy agent const agent = new HttpsProxyAgent(proxyUrl); fetch(targetUrl, { agent }) .then((response) => { if (!response.ok) { throw new Error(`Error fetching data. Status: ${response.status}`); } return response.json(); }) .then((data) => { console.log("Data fetched via proxy:", data); }) .catch((error) => { console.error("Proxy fetch error:", error); }); ``` Este código envia uma requisição através de um proxy específico usando `fetch` com um `HttpsProxyAgent.`. Em seguida, ele define os detalhes do proxy e cria um agente de proxy. O `fetch` também obtém os dados da URL de destino usando o proxy. > Para configurar um proxy, você deve usar a `Fetch API` do `node-fetch`. Para mais informações, visite a documentação do [node-fetch](https://github.com/node-fetch/node-fetch). Este código pode ser diferente dependendo do proxy escolhido. Consulte a [documentação oficial da Bright Data](https://docs.brightdata.com/proxy-networks/introduction) para as informações mais recentes. ## Melhores Práticas da Fetch API Ao fazer requisições com a Fetch API, siga estas práticas recomendadas para melhorar a eficiência e o desempenho: ### Respostas em Cache Para reduzir a carga nos servidores e melhorar a experiência geral do usuário, você pode usar mecanismos de cache que armazenam dados frequentemente requisições, evitando chamadas redundantes ao servidor. Aqui está um exemplo que verifica se seus dados já estão em cache antes de fazer uma requisição de rede: ```none const cache = new Map(); async function fetchWithCache(url) { if (cache.has(url)) { console.log("Fetching from cache:", url); return cache.get(url); } try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); cache.set(url, data); console.log("Fetched and cached:", url); return data; } catch (error) { console.error("Fetch error:", error); throw error; } } fetchWithCache("https://jsonplaceholder.typicode.com/posts") .then((data) => console.log(data)) .catch((error) => console.error("Error:", error)); ``` Prevenir requisições desnecessárias para dados já em cache pode melhorar o desempenho e reduzir os tempos de carregamento. ### Tratamento de Timeout Configurar alguns timeouts pode evitar que suas requisições de Fetch permaneçam indefinidamente. Você pode cancelar requisições que ultrapassam uma duração especificada usando o `AbortController`. No exemplo a seguir, o timeout é definido para três segundos, enquanto o valor padrão de timeout é cinco segundos: ```none async function fetchWithTimeout(url, timeout = 5000) { const controller = new AbortController(); const timeoutId = setTimeout(() => { console.warn("Fetch request timed out:", url); controller.abort(); }, timeout); try { const response = await fetch(url, { signal: controller.signal }); clearTimeout(timeoutId); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); } catch (error) { console.error("Fetch timeout or error:", error); throw error; } } fetchWithTimeout("https://jsonplaceholder.typicode.com/posts", 3000) .then((data) => console.log(data)) .catch((error) => console.error("Error:", error)); ``` Isso garante que requisições que ultrapassem o timeout especificado sejam anuladas, enquanto outros erros são tratados adequadamente. ### Limitação de Requisições Para evitar que suas APIs sejam sobrecarregadas com requisições, você deve implementar throttling para controlar a frequência das requisições. Assim, você deve limitar o número de requisições que podem ser feitas em um determinado período de tempo. O exemplo a seguir cria uma função de `throttle` que garante que uma função seja executada no máximo uma vez a cada intervalo (`limit`) especificado. ```none function throttle(func, limit) { let lastFunc; let lastRan; return function (...args) { const context = this; if (!lastRan) { func.apply(context, args); lastRan = Date.now(); } else { clearTimeout(lastFunc); lastFunc = setTimeout(function () { if (Date.now() - lastRan >= limit) { func.apply(context, args); lastRan = Date.now(); } }, limit - (Date.now() - lastRan)); } }; } const throttledFetch = throttle(async (url) => { try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log("Throttled fetch data:", data); } catch (error) { console.error("Throttled fetch error:", error); } }, 2000); throttledFetch("https://jsonplaceholder.typicode.com/posts"); console.log("Fetching again in 2 seconds..."); throttledFetch("https://jsonplaceholder.typicode.com/posts"); ``` A função `throttledFetch` usa a ferramenta de `throttle` para controlar as requisições à API. Ela garante que chamadas repetidas para buscar dados de uma URL sejam espaçadas por pelo menos dois segundos. Isso evita chamadas redundantes ou excessivas à API, trata erros e registra os dados recuperados. ## Conclusão A Fetch API simplifica as operações assíncronas e o manuseio de dados em aplicações web modernas. No entanto, desafios como [bloqueios de IP](https://brightdata.com.br/blog/proxies-101/how-to-bypass-an-ip-ban), [limites de taxa](https://brightdata.com.br/faqs/proxy-errors/429-error-how-to-avoid) e CAPTCHAs podem surgir ao lidar com requisições em grande escala ou geolocalizadas. As APIs de Raspagem e o Navegador de Raspagem da Bright Data oferecem soluções poderosas para esses desafios. As [APIs de Raspagem](https://brightdata.com.br/products/web-scraper) permitem uma extração de dados sem interrupções, contornando medidas anti-raspagem, enquanto o [Navegador de Raspagem](https://brightdata.com.br/products/scraping-browser) lida com conteúdo dinâmico e pesado em JavaScript de forma eficiente. Essas ferramentas garantem uma coleta de dados segura, escalável e confiável, mesmo para os sites mais complexos. Contate-nosTeste grátis![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg) Índice Dedicated Scraper APIs & No-Code Scrapers Over 1000 scrapers for all popular domains. Simplify your web scraping. [See pricing](/pricing/web-scraper "See pricing") Just want data? Skip scraping. Hundreds of ready-to-use datasets from all popular domains. [See pricing](/pricing/datasets "See pricing") [ ](https://news.ycombinator.com/submitlink?t=Fetch+API+em+JavaScript%3A+Tudo+o+que+Voc%C3%AA+Precisa+Saber&u=https://brightdata.com.br/blog/dados-do-site/fetch-api-in-javascript) [ ](https://www.linkedin.com/shareArticle?mini=true&title=Fetch+API+em+JavaScript%3A+Tudo+o+que+Voc%C3%AA+Precisa+Saber&url=https://brightdata.com.br/blog/dados-do-site/fetch-api-in-javascript) [ ](http://www.reddit.com/submit?title=Fetch+API+em+JavaScript%3A+Tudo+o+que+Voc%C3%AA+Precisa+Saber&url=https://brightdata.com.br/blog/dados-do-site/fetch-api-in-javascript) ## Você também pode estar interessado em [ ![OpenHuman with Bright Data](https://media.brightdata.com.br/2026/09/OpenHuman-with-Bright-Data.png) ](https://brightdata.com.br/blog/ai/openhuman-with-bright-data "Acesso à Web Pronto para Produção no OpenHuman Através do Bright Data CLI") [AI ![Antonello Zanini](https://media.brightdata.com.br/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Acesso à Web Pronto para Produção no OpenHuman Através do Bright Data CLI Integre o Bright Data CLI ao OpenHuman para habilitar acesso à web pronto para produção e coleta de dados para agentes de IA. 09-Sep-2026 14 min de leitura ](https://brightdata.com.br/blog/ai/openhuman-with-bright-data) [ ![Multimodal Web Scraping with MiniMax](https://media.brightdata.com.br/2026/09/Multimodal-Web-Scraping-with-MiniMax.png) ](https://brightdata.com.br/blog/dados-do-site/multimodal-web-scraping-with-minimax "Scraping de Dados Multimodal com MiniMax") [Dados do site ![Antonello Zanini](https://media.brightdata.com.br/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Scraping de Dados Multimodal com MiniMax Combine a API Web Unlocker da Bright Data com a visão MiniMax M3 para extrair dados estruturados de imagens e capturas de tela de páginas web. 09-Sep-2026 5 min de leitura ](https://brightdata.com.br/blog/dados-do-site/multimodal-web-scraping-with-minimax) [ ![The 10 Best CLI Tools for Codex in 2026](https://media.brightdata.com.br/2026/08/The-10-Best-CLI-Tools-for-Codex-in-2026.png) ](https://brightdata.com.br/blog/ai/best-cli-tools-for-codex "As 10 Melhores Ferramentas CLI para Codex em 2026 – Testadas & Classificadas") [AI ![Daniel Shashko](https://media.brightdata.com.br/2022/04/Daniel-Shashko-2-50x50.png) Daniel Shashko Web Data & AI Expert ### As 10 Melhores Ferramentas CLI para Codex em 2026 – Testadas & Classificadas As 10 ferramentas CLI que tornam o Codex mais rápido e capaz, começando com o Bright Data CLI para acesso real à web de dentro do sandbox. 06-Sep-2026 24 min de leitura ](https://brightdata.com.br/blog/ai/best-cli-tools-for-codex)