Esta é a Aula Extra de Revisão da turma online: Todas em Tech on17 - Front-end, nesta aula do dia 16/07/2022 teremos os seguintes conteúdos:
- Métodos de array
- APIs
- Protocolo HTTP
- Request/Response
- API
- JSON
- fetch()
Lilit Bandeira, sou uma travesti paraibana residente em São Paulo, trabalho como Software Engineer no Nubank, ex-aluna e professora {reprograma} e professora também no minas programam;
- E-mail: devlilitbandeira@gmail.com
- GitHub
- Manter atenção nas explicações e codar nos momentos definidos;
- Enviar dúvidas no chat para as monitoras;
- Levantar a mão sempre que desejar falar, o que pode ser feito a qualquer momento;
- Manter microfones desligados sempre que alguém estiver falando;
- Manter as câmeras ligadas o máximo de tempo possível;
const numeros = [3, 2, 4, 3, 5, 1, 3, 4, 2];
filter()
const filtrarPor = numeros.filter((element) => element == 3);
console.log(filtrarPor); // retorno [3, 3, 3]
map()
const executarTodos = numeros.map((element) => (element = 4));
console.log(executarTodos); // retorn [4, 4, 4, 4, 4, 4, 4, 4, 4]
reduce()
-> O método reduce() uma callback que será executada para cada elemento da array, resultando num único valor de retorno, esta callback pode receber alguns parâmetros, sendo os mais comuns o acumulador
e o valorAtual
const ReduzirPara = numeros.reduce(
(acumulador, valorAtual) => acumulador + valorAtual
);
console.log(ReduzirPara); // retorno 27
-
O HTTP - Hypertext Transfer Protocol (Protocolo de transferência de Hipertexto) é um protocolo de comunicação. Através dele o cliente e o servidor conseguem se comunicar, seguindo um conjunto de regras bem definidas. Esse protocolo determina como devem ser solicitadas informações e como elas devem ser entregues.
-
Quando acessamos uma URL, o Client envia uma solicitação passando todas as informações que precisamos para o Server, esta comunicação é feita na grande maioria dos casos de aplicações modernas através do Protocolo HTTP
-
O protocolo HTTP é um protocolo usado no modelo Client/Server e é baseado em requests(requisições) e responses(respostas);
-
Uma Request deve indicar a ação a ser executada de acordo com as definições do protocolo HTTP, estes são os Métodos HTTP
-
Principais métodos HTTP:
Estado | Ação realizada |
---|---|
POST | Create (Criar) - Armazena dados no banco |
GET | Read (Ler) - Realiza apenas leitura de dados no banco |
PUT | Update (Substituir) - Atualiza dados substituindo o conjunto de dados |
PATCH | Update (Modificar) - Atualiza dados modificando apenas o campo desejado |
DELETE | Delete (Excluir) - Exclui dados do banco |
- Uma Response é a reação do Server enviada após receber uma requisição do Client, e seu conteúdo possui além do que foi solicitado, um Status Code.
Código | Tipo de Resposta |
---|---|
100 - 199 | Apenas informações |
200 - 299 | Sucesso |
300 - 399 | Redirecionamento |
400 - 499 | Erro do Client |
500 - 599 | Erro do Server |
-
Uma API - Application Programming Interface (Interface de Programação de Aplicativos) é uma interface de comunicação e integração entre aplicações. As APIs criam formas e ferramentas para que utilizemos uma funcionalidade ou acessemos dados sem precisar recriar coisas que já existem.
-
As APIs podem ser uma Web APIs, uma lib, um framework e todas as interfaces que forneçam funcionalidades em uma linguagem específica;
-
As Web APIs são um conjunto de instruções e padrões de programação para acesso a um aplicativo de software fornecido por uma empresa de software para que outras desenvolvedoras possam utiliza-o em sua próprias aplicações, algumas destas são APIs públicas que podem ser acessadas por meio de cadastros gratuitos ou até completamente aberta, outras são APIs privadas que são de uso restrito/interno da empresa criadora.
-
Dentre as arquiteturas das APIs, temos as APIs REST: A arquitetura REST - ou Representational State Transfer (Transferência de Estado Representacional), que é amplamente utilizada dentro do desenvolvimento de APIs pois possui um modelo mais simples de requisição que segue determinadas práticas e diretrizes na sua criação, neste curso iremos estudar as APIs REST.
-
Exemplos de APIs públicas:
- Toda API possui uma documentação que nos fornecem tudo que precisamos saber para utilizá-la;
-
JSON - JavaScript Object Notation (Notação de Objeto JavaScript) é um formato baseado em texto padrão para representar dados estruturados com base na sintaxe do objeto JavaScript; (MDN)
-
Mesmo que se assemelhe à sintaxe literal do objeto JavaScript, ele pode ser usado independentemente do JavaScript, e muitos ambientes de programação possuem a capacidade de ler (analisar) e gerar JSON; (MDN)
-
O JSON é transmitido por uma rede como string e é uma formatação muito leve, o que permite ser utilizado em uma variedade enorme de aplicações.
-
O JavaScript possui o Objeto global
JSON
que possui métodos para converter para objeto quando queremos acessar os dados e para string quando queremos enviá-lo por rede; -
Um objeto JSON pode ser armazenado em seu próprio arquivo. (MDN) (ex.: arquivo.json)
JSON contém apenas propriedades, sem métodos;
JSON só aceita aspas duplas;
JSON não aceita chaves/propriedades sem aspas como objetos JS, toda string precisa usar aspas;
-
fetch()
é um método moderno e amplamente utilizado nas aplicações JavaScript atualmente que permite acesso e manipulação de requisições HTTP, este método é fornecido pela API Fetch. Ofetch()
retorna umaPromise
. -
Estrutura do
fetch()
:
fetch(url, options)
url
é geralmente uma string que se refere ao recurso que desejamos buscar, no caso do métodoGET
somente este argumento é necessário;options
é um argumento opcional, um objeto que contém qualquer configurações customizadas que desejamos adicionar às requisições, sendo os principais:method
uma string que define o método da requisição;headers
um objeto com informações de cabeçalho;body
um objeto com informações do corpo da requisição;
- Uma requisição
GET
utilizandofetch()
, sem informações adicionais:
async function getData() {
try {
const response = await fetch("https://api.exemplo.com")
const data = await response.json()
console.log(data)
}
catch(erro) {
console.log("HTTP-Error: " + erro);
}
}
getData()
- Uma requisição
GET
utilizandofetch()
, adicionando um objeto de configurações:
async function getData() {
try {
const response = await fetch("https://api.exemplo.com", {
method: 'GET',
headers: {
'Content-Type': 'image/jpeg'
},
cache: 'default'
})
const data = await response.json()
console.log(data)
}
catch(erro) {
console.log("HTTP-Error: " + erro);
}
}
getData()