Vanilla Javascript - #38 Api Fetch
01/08/2019Nessa vídeo-aula trabalharemos com uma outra maneira de fazer requisições e receber respostas do servidor, utilizaremos a API Fetch.
HTML
No nosso HTML criaremos um simples botão que será o gatilho para chamada do nosso evento click. Criaremos também uma div com a classe result que abrigará os resultados da requisição:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fetch</title>
</head>
<body>
<div id="result"></div>
<button id="btn">Click me</button>
<script src="javascript.js"></script>
</body>
</html>Javascript
No javascript faremos a requisição através da API Fetch:
(function readyJS(win,doc){
'use strict';
let btn=doc.querySelector('#btn');
let result=doc.querySelector('#result');
function fetchSend()
{
let params={
method: 'POST',
mode: 'cors',
cache:'default'
};
fetch('controller.php',params)
.then(function(response){
if(response.ok){
return response.json();
}
})
.then(function(data){
result.innerHTML=data.name+' tem '+data.age + 'anos!';
});
}
btn.addEventListener('click',fetchSend,false);
})(window,document);Na função acima fizemos uma requisição ao arquivo controller.php e setamos o mode cors para nos dar autorização de fazer requisições no lado backend.
Controller
O controller executará no lado servidor a requisição e retornará uma resposta. No caso utilizaremos o PHP para isso:
<?php
$arr=[
'name'=>'Thiago',
'age'=>18
];
echo json_encode($arr);A única desvantagem da API Fetch é o suporte pra navegadores antigos que infelizmente não existe.
Sucesso nos códigos e na vida!
Posts Relacionados
