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.
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.
Para saber mais sobre Axios API:
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.