Locaweb - Edição 65

62 / 68

62 REVISTA LOCAWEB
CODE/
FETCHAPI
var URL = .
meusite.com.br/events';
Fetch(URL, {
method: 'get'
}).then(function(response)
{
response.text().
then(function(result){
console.log(result);
})
}).catch(function(err) {
console.error(err);
});
Além de ler a resposta em
texto da requisição, é possível
fazer isso diretamente por bytes.
Por exemplo: para carregar uma
imagem. Para isso, acessamos um
“reader”, com getReader, que vem
no body da resposta.
let reader = response.body.
getReader();
Este é o código para o uso
de reader na leitura do
response do Fetch:
Fetch(URL)
.then(function(response){
response.body
.getReader()
.read()
.then(function(data){
// transformando em
string
var Fetched = \
String.fromCharCode.
apply(null, data.value);
console.
log(Fetched);
});
})
.catch(function(err){
console.error('Falha ao
recuperar a informação',
err);
});
HEADERS
O objeto Request pode
receber instâncias de Header
(que o Fetch cria implicitamente),
e permite a manipulação de
suas propriedades. Este código
instancia um Header já com as
propriedades que se quer usar:
var headers = new
Headers({
'Content-Type': 'text/
plain',
'X-Custom-Header':
'valor'
});
É possível acrescentar ou
alterar propriedades a um objeto:
headers.append('X-Custom-
Header', 'valor');
As funcionalidades estendidas
Q¥R VH OLPLWDP D GHíQLU DV
propriedades. Elas permitem
ler e recuperá-las, para controle
ou manipulação.
da sub-fonte
cache - modo de cache (default,
reload, no-cache)
O código a seguir usa alguns
parâmetros, como headers, mode,
cache, para customizar o Fetch.
var myHeaders = new
Headers();
var myInit = { method:
'GET',
headers:
myHeaders,
mode:
'cors',
cache:
'default' };
Fetch('flowers.jpg',myInit)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.
createObjectURL(myBlob);
myImage.src = objectURL;
});
CHEQUE SE O
FETCH OBTEVE SUCESSO
Será gerado um TypeError
quando um erro de rede for
encontrado, pelo Fetch, como falta
de permissão (404 não é um erro de
network, entretanto). Para controlar
essa possibilidade, é cabível
checar a propriedade Response.Ok,
testando se o valor é "true".
Este é um código de
checagem para erro de rede.
Fetch('flowers.jpg').
then(function(response) {
if(response.ok) {
response.blob().
then(function(myBlob) {
var objectURL = URL.
createObjectURL(myBlob);
myImage.src =
objectURL;
});
headers.get('Content-
Type'); // "text/plain"
headers.set('Content-Type',
'application/json');
headers.has('Content-
Type'); // true
Também permitem deletar
propriedades já existentes.
headers.delete('X-Custom-
Header');
REQUEST
Requests são instâncias de
chamadas Fetch. Passando um
request, é possível criar chamadas
avançadas e customizadas.
Estas são as possibilidades
de requests:
method - GET, POST, PUT,
DELETE, HEAD
url - URL do request
headers - headers associadas a
um objeto
referrer - referência do request
mode - cors, no-cors, same-origin
credentials - cookies serão
enviados com o request? omit,
same-origin
redirect - follow, error, manual
integrity - valor de integridade
[O MÉTODO PADRÃO ERA ACESSAR OS DADOS EM
UMA BASE EXTERNA, A PARTIR DE UMA PÁGINA
SEPARADA DO FORMULÁRIO OU DA CONSULTA]
Dados sobre o XHR em
Na página há uma rápida introdução
ao Json, formato leve para troca de dados