Fetch, permite fazer request da mesma forma como era feito antigamente com o XMLHttpRequest. Uma das diferenças é que ele utiliza Promisses, o que gera uma API limpa e simples.
Request básico
Fetch recebe dois parâmetros, um sendo a url, e o outro as opções:
fetch('/site/url')
.then(function(response) { // Resposta })
.catch(function(err) { // Errou! });Se você usar es6 fica ainda mais bonito:
fetch('/site/url')
.then(response => console.log(response))
.catch(err => console.log('Errou!'))Lidando com JSON
Se você for usar JSON, o parâmetro do callback tem um método chamado .json(), que ira transformar sua resposta em um objeto javascript:
fetch('/site/url/json')
.then(function(response) {
// Converte para JSON
return response.json();
})
.then(function(js) {
// Objeto javascript
console.log(js);
});Text
Se o seu serviço recebe um HTML como resposta, aqui está como você lida com uma resposta em html ou texto:
fetch('/site/url')
.then(function(response) {
// Transforma em texto
return response.text();
}).then(function(txt) {
// String
console.log(txt);
});Headers and Metadatas
Response headers e metadatas são encontrados no objeto response, e o método get é mostrado a seguir:
fetch('/site/url')
.then(function(response) {
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('Date'));
console.log(response.status);
console.log(response.statusText);
console.log(response.type);
console.log(response.url);
});Você também pode setar headers no seu request, mas não pode setar cookies.
fetch('/site/url',
{
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});Método POST
Você também pode usar esse método com o fetch, basta setar as opções como eu mostro a seguir.
fetch('/site/url',
{
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded"
},
body: 'a=1&b=2'
})
.then(function(res){
return res.json();
})
.then(function (data) {
console.log('Resposta em JSON', data);
})
.catch(function (error) {
console.log('Faustão fellings', error);
});Compatibilidade
Fetch ainda não tem suporte em 100% dos browsers mas você pode usar um polyfill feito pelo pessoal do github.
O intuito desse post foi mostrar o básico se você deseja saber ainda mais recomendo a leitura desse posts que vale muito a pena.
