Requisições Ajax no JavaScript com a Fetch API \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 15 Horas 13 Min 20 Seg Tempo restante da oferta: 15 13 20 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Requisições Ajax no JavaScript com a Fetch API [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # Requisições Ajax no JavaScript com a Fetch API A Fetch API veio para substituir a antiga XmlHttpRequest e o suporte dela já é bem consistente nos navegadores modernos. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/201705171237.png) Olá, Web Developers! Há muito tempo que, ao fazer requisições, os desenvolvedores costumam usar a função `ajax()` do `jQuery`, pois ela é muito mais simples de usar do que o método nativo do JavaScript, o `XmlHttpRequest()`. ```js if (window.XMLHttpRequest) { // Mozilla, Safari, ... request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { request = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { request = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } } request.addEventListener('load', function(){ console.log(this.responseText) }); request.open('GET', 'https://api.github.com/search/repositories?q=javascript', true); request.send(null); ``` [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) Só para pegar o `XmlHttpRequest()` já era chatinho. Depois, era necessário criar um listener, passando uma função de callback, uma função para mandar abrir a conexão e, por fim, executar a função que iria enviar a requisição. Muitos desenvolvedores iniciantes até chegam a inserir o `jQuery` em seus projetos apenas por causa da função `$.ajax()`, enquanto outros criam funções para facilitar o uso do `XmlHttpRequest()`. O `AngularJS` até nos disponibilizava o serviço `$http`, para facilitar as requisições, e assim não era preciso incluir o jQuery para esse propósito. O `fetch()` faz a mesma coisa, mas com uma API nova, mais flexível e simples de usar. Ela tem a premissa de substituir a antiga *XMLHttpRequest*. ```js fetch('https://api.github.com/search/repositories?q=javascript') .then(response => response.json()) ``` Uau! O único parâmetro obrigatório do `fetch()` é uma String que indica o endereço de onde iremos fazer a requisição. Com isso, faremos uma requisição GET. O `fetch()` nos retorna uma `Promise`. Essa Promise retorna um objeto `Response` com informações da resposta do servidor. Como queremos pegar a resposta em formato JSON, basta executar a função `json()`. ## Configurando a requisição O `fetch()` aceita um segundo parâmetro, onde podemos passar um objeto de configuração. É nele onde indicamos o método da requisição, cabeçalho, corpo, etc. ```js fetch('https://myexample.com', { method: 'POST', headers: {'Content-Type':'application/x-www-form-urlencoded'}, body: 'foo=bar&blah=1' }) .then(response => response.json()) ``` - **method** - GET \| POST \| PUT \| DELETE \| HEAD - **url** - URL da requisição - **headers** - cabeçalho - **body** - corpo da requisição - **referrer** - referência da requisição - **mode** - cors \| no-cors \| same-origin - **credentials** - indica se os cookies devem ser enviados junto com a requisição - **redirect** - follow \| error \| manual - **integrity** - valor de integridade da fonte - **cache** - modo do cache (default \| reload \| no-cache) ## Finalizando Veja então que o `fetch()` é bem mais simples de usar e, atualmente, ele já tem um bom suporte por parte dos navegadores modernos, como você pode visualizar aqui no [caniuse](http://caniuse.com/#search=fetch). Qualquer coisa, pode-se criar um fallback para dar suporte a navegadores antigos (se for muito necessário para o seu projeto :P). Você já tem usado o `fetch()`? Compartilhe com a gente aí nos comentários! [ ![Google Chrome Developer Tools](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/chrome-developer-tools.svg) Curso Google Chrome Developer Tools Conhecer o curso ](https://www.treinaweb.com.br/curso/google-chrome-developer-tools) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/09/funcionalidades-do-jquery-com-a-api-nativa-do-javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ Funcionalidades do jQuery com a API nativa do JavaScript ](https://www.treinaweb.com.br/blog/funcionalidades-do-jquery-com-a-api-nativa-do-javascript) Nesse post veremos algumas das funcionalidades do jQuery que hoje podem ser aplicadas diretamente com a API nativa do JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/AJAX-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 6 anos atrás ## [ O que é uma requisição AJAX? ](https://www.treinaweb.com.br/blog/o-que-e-uma-requisicao-ajax) Hoje, é relativamente comum estarmos em contato com requisições AJAX. Confira neste artigo como essa requisição funciona. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/web-2185247_640-400x280.jpg) [ Web Services ](https://www.treinaweb.com.br/blog/categoria/web-services) 10 anos atrás ## [ REST não é simplesmente retornar JSON: indo além com APIs REST ](https://www.treinaweb.com.br/blog/rest-nao-e-simplesmente-retornar-json-indo-alem-com-apis-rest) Criar uma API REST não tem a ver com retornar JSON e sim com a correta utilização do protocolo HTTP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12132017/introducao-swoole-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Introdução ao Swoole, framework PHP assíncrono baseado em corrotinas ](https://www.treinaweb.com.br/blog/introducao-ao-swoole-framework-php-assincrono-baseado-em-corrotinas) Uma Introdução ao Swoole, framework PHP assíncrono baseado em corrotinas e comparação dele com o modelo tradicional que usa um servidor web (nginx, apache etc) com PHP-FPM. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/c-sharp-consumindo-apis-com-flurl-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ C# - Testando requisições com Flurl ](https://www.treinaweb.com.br/blog/c-testando-requisicoes-com-flurl) Implemente testes unitários em requisições HTTP com o auxílio de Flurl. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/15161010/app-flask-html5-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 7 anos atrás ## [ Retornando páginas HTML em requisições Flask ](https://www.treinaweb.com.br/blog/retornando-paginas-html-em-requisicoes-flask) Agora que já sabemos criar nossa primeira aplicação com Flask, veremos neste artigo como retornar arquivos HTML nos métodos do nosso projeto. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ROTAS-EXPRESS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Criando Rotas com Express.js ](https://www.treinaweb.com.br/blog/criando-rotas-com-express-js) Vamos aprender a configurar rotas com o Express.js, com exemplos utilizando as requisições GET, POST, PUT e DELETE. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/selecionando_cores-1-400x280.png) [ Web Services ](https://www.treinaweb.com.br/blog/categoria/web-services) 10 anos atrás ## [ Você conhece o GraphQL e como ele pode te ajudar? ](https://www.treinaweb.com.br/blog/voce-conhece-o-graphql-e-como-ele-pode-te-ajudar) O GraphQL é uma linguagem de consulta que facilita o nosso trabalho na hora de fazer requisições, basta que indiquemos os campos que queremos sem que nos preocupemos de onde os dados estão vindo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/SERVIDOR-HTTP-EXPRESS-JS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Criando um servidor HTTP com Express ](https://www.treinaweb.com.br/blog/criando-um-servidor-http-com-express) O Express é um framework utilizado em conjunto com o Node.js. Ele possui características que facilitam o desenvolvimento de nossas aplicações web e APIs, como um sistema de rotas completo, tratamento de exceções, gerenciamento de requisições HTTP e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/08085435/app-flask-css-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 7 anos atrás ## [ Utilizando arquivos estáticos no Flask ](https://www.treinaweb.com.br/blog/utilizando-arquivos-estaticos-no-flask) Veja neste artigo como utilizar arquivos estáticos em projetos Flask. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Gerenciamento de dependências no Go ](https://www.treinaweb.com.br/blog/gerenciamento-de-dependencias-no-go) Nesse artigo veremos como podemos utilizar o Go Tools para realizar o gerenciamento de dependências no Go. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/PUB-DEV-400x280.jpg) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 4 anos atrás ## [ Gerenciador de pacotes Dart e Flutter ](https://www.treinaweb.com.br/blog/gerenciador-de-pacotes-dart-e-flutter) Saiba o que é o gerenciador de pacotes Dart e Flutter, como utilizar um pacote, biblioteca instalada por ele e sobre o pubspec.yaml. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **15h 13min 20s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58