Como fazer requisições ajax

Há algum tempo (não muito distante), pessoas comuns adicionavam em seus projetos a biblioteca JQuery. Em alguns casos (ainda frequentes), apenas para usarem a função ajax(). $.ajax({ url:"https://api.github.com/users/tailomateus/repos", dataType: 'json', success: function(response){ console.log(response); } }); Além dessa função, o JavaScript possui um método, XMLHttpRequest também faz requisições. Porém para conseguir o esperado é necessário muitos
Como fazer requisições ajax

Há algum tempo (não muito distante), pessoas comuns adicionavam em seus projetos a biblioteca JQuery.
Em alguns casos (ainda frequentes), apenas para usarem a função ajax().

$.ajax({
    url:"https://api.github.com/users/tailomateus/repos",
    dataType: 'json',
    success: function(response){
		console.log(response);
    }
});

Além dessa função, o JavaScript possui um método,
XMLHttpRequest também faz requisições.
Porém para conseguir o esperado é necessário muitos passos.
Com isso foi criado a Fetch API com recursos mais flexíveis e conceitos de request e response,
isso cabe em novas tecnologias que estão surgindo, como Service Workers e Cache API.

A Fetch API e o Axios API utilizam o conceito de promessas, você pode ler mais sobre nos links abaixo:

[Promises no JavaScript] (https://braziljs.org/blog/promises-no-javascript/)

[Promessas em JavaScript: uma introdução] (https://developers.google.com/web/fundamentals/primers/promises?hl=pt-br)

[Using promises] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)

Fetch API – Como funciona

Abaixo, como exemplo é utilizado a API do Github.

fetch('https://api.github.com/users/tailomateus/repos')
  .then(response => response.json())
  .then(data => console.log('data is', data))
  .catch(error => console.log('error is', error));

Além da url, existem outros parâmetros,caso queira se aprofundar mais no assunto, sugiro:

[Introduction to fetch] (https://developers.google.com/web/updates/2015/03/introduction-to-fetch)

[Using fetch – CSS Tricks] (https://css-tricks.com/using-fetch/)

[Using fetch – Mozilla] (https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch)

SUPORTE

O maior problema para mim é não possuir suporte no IE 11.

Support Fetch API

Axios – Como usar

A API é basicamente um cliente http, funciona em browsers e em servidores nodejs.

Se quiser usar no browser, importe a cdn:


Ou instale utilizando o npm:

Importe o pacote:

ES5: var axios = require('axios'); 
ES6: import axios from 'axios';

Após instalar, o código abaixo simula uma requisição get na API do Github


axios.get('https://api.github.com/users/tailomateus/repos').then(function(response){
    console.log(response.data); 
}); 

Para utilizar o método post, possui um parâmetro a mais, indicando o que está sendo enviado para o servidor:

axios.post('/save', { firstName: 'Teste', lastName: 'Testes' })
  .then(function(response){
    console.log('salvo com sucesso')
});

SUPORTE

É suportado pelos browsers mais usados.

Support Fetch API

Para saber mais sobre Axios API:

Axios NPM

Getting Started With Axios

CONCLUSÃO

Neste artigo foi demonstrado formas para fazer requisições (JQuey, Fetch API, Axios), além dessas, existem outras formas. Porém,
cabe a você a melhor opção para usar nos projetos.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *