WebDev

JavaScript

Aula 6

JSON, promise e fetch

USPCodeLab

Facebook:

https://facebook.com/uspcodelab/

Este trabalho do USPCodeLab está licenciado com uma Licença Creative Commons - Atribuição 4.0 Internacional

O USPCodeLab é um grupo de extensão que tem como objetivo estimular a inovação tecnológica na USP

Site:

https://codelab.ime.usp.br/

Objetos no JavaScript

chave

valor

Objetos no JavaScript

const carro = {
    modelo: 'Golf',
    ano: 2018,
    valor: 99999,
    proprietario: 'Pedrão'
}

Objeto:

Definimos com const ou let, como qualquer outra variável, mais o seu nome.

Chave:

funciona como índice e é uma referência única para o

valor

Valor:

Atribui um valor de qualquer tipo a chave, ex.: string, number, null, Date, ...

Objetos no JavaScript

const carro = {
    modelo: 'Golf',
    ano: 2018,
    valor: 99999,
    nomeProprietario: 'Pedrão',
    'idade do proprietario': 31,
    endereçoLogradouroProprietario: 'Rua do Ipiranga',
    enderecoNumeroProprietario: 1010
}

console.log(carro.nomeProprietario)   // 'Pedrão'
console.log(carro['idade do proprietario'])  // 31

nomeDoObjeto.atributo == valor

nomeDoObjeto['atributo'] == valor

Objetos no JavaScript

const carro = {
    modelo: 'Golf',
    ano: 2018,
    valor: 99999,
    proprietario: {
        nome: 'Pedrão',
        idade: 31,
        endereco: {
            logradouro: 'Rua do Ipiranga',
            numero: 1010
        }
    },   
}

console.log(carro.proprietario.nome)      // 'Pedrão'
console.log(carro.proprietario.endereco)
// {logradouro: 'Rua do Ipiranga', numero: 1010}

Objetos no JavaScript

const carro = {
    modelo: 'Golf',
    ano: 2018,
    valor: 99999,
    proprietario: {
        nome: 'Pedrão',
        idade: 31,
        endereco: {
            logradouro: 'Rua do Ipiranga',
            numero: 1010
        }
    },
    buzina: () => {
        console.log('Bibiiiiii...');
    },
}

carro.buzina() // 'Bibiiiiiii...'

Objetos no JavaScript

const carro = {
    modelo: 'Golf',
    ano: 2018,
    valor: 80000,

    buzina: () => console.log('Bibiiiiii...'),

    calculaSeguro(anoAtual) {
        const idadeCarro = anoAtual - this.ano;
        if (idadeCarro > 5)
            return this.valor * 0.01;
        return this.valor * 0.03;   
    }
}

console.log(calculoSeguro(2021))  // 2400

Métodos de Objetos

Object.keys(nomeObjeto) :

Referência MDN

lista todas as propriedades do objeto.

Object.values(nomeObjeto) :

lista todas os valores do objeto.

Object.entries(nomeObjeto) :

lista todos os pares [chave, valor] do objeto.

Métodos de Objetos

const ficha = {
  nome: 'Matheus',
  idade: 23,
  profissao: 'estudante',
  aniversario: '13 de fevereiro',
  'comida favorita': 'lasanha',
}

const printaItem = ([chave, valor]) => console.log(chave + ': ' + valor);

Object.entries(ficha).forEach(printaItem);
// 'nome: Matheus'
// 'idade: 23'
// 'profissao: estudante'
// 'aniversario: 13 de fevereiro'
// 'comida favorita: lasanha'

JSON

JavaScript Object Notation

É o formato de troca de dados mais utilizado na web

Baseado em um subconjunto de JavaScript

Pode armazenar 5 tipos de valor: number, string, object, array e null

Usa o padrão chave e valor

JSON

{
	"titulo": "John Wick 4",
	"duracao": 151,
	"genero": "ação",
	"estreia": {
		"ano": 2022,
		"mes": 5,
		"dia": 27,
	},
	"elenco": [
		{
			"nome": "Keanu Reeves",
			"idade": 56
		},
		{
			"nome": "Asia Kate Dillon",
			"idade": 36
		}
		...
	]
}

JSON

JSON.parse(nomeDoJSON) :

JSON.stringify(nomeDoJSON) :

const x = {
    "nome": "Gabriel",
    "idade": 19
};

JSON.stringify(x) // Object -> String (em JSON)
// "{\"nome\":\"Gabriel\",\"idade\":19}"

const x = '{"nome":"Gabriel", "idade":19}';

JSON.parse(x) // String (em JSON) -> Object
// {"nome":"Gabriel","idade":19}

Programação assíncrona

Execução de código síncrono

Execução de código assíncrono

TAREFA 1

TAREFA 2

TAREFA 3

tempo

Relembrando arrow functions

Vamos voltar a usá-las aqui

let f = (primeiro, segundo) => (primeiro + segundo);
// função que soma dois números
f(1, 2) // 3

let f = (primeiro, segundo) => {
  primeiro = primeiro + 2;
  return primeiro + segundo;
}

Promise

Representa a conclusão eventual (ou a falha) de uma operação assíncrona e seu resultado

Usada para lidar com código assíncrono

Estados da Promise

Rejeitada

Pendente

Resolvida

A promise for resolvida

promise.then(value => {
  console.log('resolvido');
});

promise.catch(value => {
  console.log('rejeitado');
});

A promise for rejeitada

promise.then(value => {
  console.log('resolvido');
}).catch(value => {
  console.log('rejeitado');
});

value é o valor prometido!!!!

Fetch

Permite fazer requisições para o servidor

Pedir para receber/enviar dados

enviar uma compra
carregar informação do usuário
receber as últimas atualizações de um feed
etc…

SERVIDOR

MERO MORTAL FAZENDO FETCH

Sem necessidade de recarregar a página!

Fetch

Sintaxe básica

url: a URL que será acessada
options: parâmetros opcionais: método HTTP, cabeçalhos

Retorno: o fetch retorna um promise, que é resolvido num objeto Response assim que o servidor responder

let promise = fetch(url, [options])

Fetch

O retorno Response possui vários métodos baseados em Promises, que dão acesso ao corpo em vários formatos:

- response.text() – lê a resposta e retorna como texto

- response.json() – interpreta a resposta como JSON

- response.blob() – retorna a resposta como Blob (binário)

Veja outros em: JavaScript.info/fetch

Fetch

Sintaxe básica

let response = await fetch(url);

if (response.ok) { // se o HTTP-status for 200-299
  // pega o corpo da resposta
  let json = await response.json();
}
else {
  alert("Erro HTTP: " + response.status);
}

let json = fetch(url)
  .then(response => response.json()) 
	// se o HTTP-status for 200-299
	.then(json => json)
  .catch(alert("Erro HTTP: " + response.status));