Esta é a 11ª semana da turma online: Todas em Tech on17 - Front-end, nesta aula do dia 05/06/2022 teremos os seguintes conteúdos:

• Promise
• async e await
• Requisição a APIs
  • Server/Client
  • URL, Domínio, IP e DNS
  • Protocolo HTTP
  • Request/Response
  • API
  • JSON
  • XMLHttpRequest()
  • 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: [email protected]
• LinkedIn
• 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;

• Instalar node.js
• Instalar Postman

• Promise é um objeto do JavaScript que tem a função de lidar com assincronicidade através de estados;

• Funções assíncronas modernas retornam uma promise que representa a eventual falha ou conclusão de uma operação assíncrona, assim uma função assíncrona retorna um valor como uma função síncrona, porém no lugar do valor final, retorna uma promessa ao valor em algum momento no futuro;

• Ciclo de vida da Promisse (estados):

  Estado	Significado
  Pending	Estado inicial, quando a promise ainda está em execução (não resolveu ou rejeitou)
  Fulfilled	Quando executou todas as operações com sucesso
  Rejected	Quando a execução finalizou com erro, falhou

• Cria-se uma promise a partir da função construtora Promise passando como argumento uma callback que por sua vez recebe como argumentos os dois resultados possíveis para a promise: resolve ou reject, duas outras funções que executam o possível sucesso ou erro da promessa, respectivamente;
• resolve(): Função que executa caso a promise seja resolvida com sucesso;
• reject(): Função que executa caso a promise seja resolvida com erro;
• Tratamos o retorno das promises através de métodos próprios, que chamam as callbacks depois da conclusão da promise;
• then(): Método que ativa uma callback quando a promise for resolvida, o argumento desta callback é sempre o valor retornado na função resolve();

O then() retorna uma nova promise e por isso vários thens podem ser encadeados para casos onde existam duas ou mais operações assíncronas consecutivas, neste caso o valor do primeiro argumento de cada then encadeado será o valor do retorno do anterior;

• catch(): Método que ativa uma callback quando a promise for rejeitada, o argumento desta callback é sempre o valor retornado na reject();

• finally() - Método que ativa uma callback quando a promisse acabar, independente de ter sido resolvida ou rejeitada, não recebe como argumento o retorno de resolve() ou reject();

• As palavra-chaves async e await atuam como um 'açúcar sintático' em cima de promises, faciltando a visualização e tornando a leitura do código assíncrono mais próxima do código síncrono;
• Toda função que recebe o async se torna uma função assíncrona, que passa a retornar uma promise ao invés de retornar um valor diretamente, como uma promise o retorno desta função pode ser tratado com um then() normalmente;
• Uma função async permite que a palavra-chave await seja usada dentro dela para invocar código assíncrono;
• o await só funciona dentro de funções async e é colocado na frente de qualquer função que retorne promise para pausar o código até que a promise seja resolvida, retornando o valor resultante, importante usar apenas quando necessário tratar respostas de uma promise para não paralizar o fluxo, quando usado da maneira correta não altera a performance da aplicação;
• Não precisa de funções para sincronizar os resultados;
• Outro método importante da promise é o Promisse.all() que recebe uma array de funções assincronas independentes entre si, evitando o uso de awaits que não sejam necessários;
• Facilita o tratamento de erros seja com menor encadeamento do .then() ou ainda com o uso de try/catch;

• É usado para marcar um bloco que será testado (try) e especifica uma ação para que uma possível exceção(erro) seja capturada pelo catch();
• Ao usar o try é criado um bloco de código protegido, que caso ocorra algum erro neste bloco, a execução é desviada para o catch(), desta forma a aplicação não será quebrada e o erro poderá ser tratado, permitindo que o código siga sua execução;
• O catch() é executado somente quando há alguma exceção no bloco try, caso contrário ele será ignorado, o argumento recebido pelo catch é a exceção ocorrida no bloco try e costuma ser chamada de err/error;

• Client é a interface que as usuárias interagem, isso inclui os navegadores e os apps e demais interfaces utilizadas pela usuária e que acessa a internet em diversas plataformas. O Client é responsável por solicitar serviços e dados que estão nos Servers;

• É no Client que podemos:

  1. Capturar e Validar dados inseridos pelas usuárias;
  2. Manipular a tela de acordo com as informações vindas do servidor;
  3. Gerenciar os eventos disparados pelas usuárias;
  4. Gerenciar as mídias dos dispositivos das usuárias (som e vídeo);

• Server é o responsável pelo processamento, a organização e o gerenciamento dos dados. Um Server responde às solicitações de serviços e dados realizadas pelos Clients;

• É no Server que podemos:

  1. Autenticar usuárias nas aplicações;
  2. Organizar e atualizar os dados compartilhados;
  3. Gerenciar recursos compartilhados;
  4. Fazer a comunicação com os bancos de dados;

• A URL - Uniforme Recourse Locator (Localizdor de recurso uniforme), representa um recurso específico na web, cada página, imagem ou qualquer arquivo na internet possui um endereço, a URL.

• Todo site possui um domínio, que é como o conhecemos e acessamos normalmente;
• Para o servidor este mesmo site é registrado, identificado e localizado pelo seu IP - Internet Protocol Address (Endereço de protocolo da Internet);
• É por isso que existe o DNS - Domain Name System (Sistema de Nome de Domínio), que é como um grande dicionário de domínios <-> IPs nativo nos browsers e demais Clients;

• 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:

• 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.

• 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:

  1. Dog API
  2. ViaCEP API
  3. ReqRes API
  4. Studios Ghibli API
  5. Poke API

• 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)

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

(fonte: MDN)

console.log(superHeroes.homeTown);
console.log(superHeroes["active"]);
console.log(superHeroes["members"][1]["powers"][2]);

[
  {
    "name": "Molecule Man",
    "age": 29,
    "secretIdentity": "Dan Jukes",
    "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
  },
  {
    "name": "Madame Uppercut",
    "age": 39,
    "secretIdentity": "Jane Wilson",
    "powers": [
      "Million tonne punch",
      "Damage resistance",
      "Superhuman reflexes"
    ]
  }
]

console.log(heroes[0]["powers"][0]);

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;

• XMLHttpRequest é um objeto que fornece funcionalidade ao cliente para transferir dados entre um cliente e um servidor. Ele fornece uma maneira fácil de recuperar dados de um URL sem ter que fazer uma atualização de página inteira, com o XHR criamos uma requisição assíncrona;

• Apesar de XML em seu nome, a requisição realizada pelo XMLHttpRequest pode receber qualquer tipo de dado.

• É um modelo antigo de requisição que era usado principalmente na programação de AJAX;

• Estrutura de uma requisição XMLHttpRequest

// cria um nova instancia do Objeto apartir do construtor XMLHttpRequest()
const request = new XMLHttpRequest();

// inicializa a requisição
request.open("GET", "https://api.exemplo.com", true);

// adiciona um evento para ser ativado quando o readyState mudar
request.onreadystatechange = () => {
  // verifica se a conexão foi bem sucedida:
  if (request.readyState == 4 && request.status == 200) {
    // atribui a uma nova variável o JSON já transformado em objeto Javascript (através do JSON.parse())
    const data = JSON.parse(request.response);
  }
})

// envia a requisição para o servidor
request.send();

• 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. O fetch()retorna uma Promise.

• Estrutura do fetch():

  fetch(url, options)

• url é geralmente uma string que se refere ao recurso que desejamos buscar, no caso do método GET 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:
  1. method uma string que define o método da requisição;
  2. headers um objeto com informações de cabeçalho;
  3. body um objeto com informações do corpo da requisição;

• Uma requisição GET utilizando fetch(), 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 utilizando fetch(), 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()

• Vamos Realizar uma mesma requisição à Dog API utilizando XMLHttpRequest() e fetch() para trazer imagens de doguinhos de acordo com suas raças através do endpoint: https://dog.ceo/api/breed/${dogName}/images/random e exibir a imagem na tela a cada atualização da página;

• Vamos Realizar com o método fetch() requisições com os demais métodos para a ReqRes API utilizando seus endpoints específicos;

• Utilize o fetch() para realizar uma requisição ao endpoint https://ghibliapi.herokuapp.com/films da Studios Ghibli API e popule a página que também será criados por vocês (HTML e CSS) com os dados do json que é a lista com todos os filmes da Ghibli (22);

• Utilize o fetch() para realizar uma requisição ao endpoint https://viacep.com.br/ws/${cep}/json/ da ViaCEP API permitindo que a usuária forneça um CEP e popule a página que também será criados por vocês (HTML e CSS) com os os dados (logradouro, bairro, localidade e uf) do json que é a objeto com todas as informações do CEP fornecido;

• Exercite criar requisições POST, PUT, PATCH e DELETE na ReqRes API

• Utilize o Postman para testar os endpoints antes de construir o código

• 💜 analu -> Pois utilizei como referência a aula que me deu na turma on11-backend nos conteúdos de 3.1 à 3.5 além de me inspirar nas imagens criadas para esta aula;
• Vivian Caldas -> Utilizei duas imagens do seu repositório da turma on13-frontend que ilustram de ótima excelente os métodos then() e cacth(), além de ter como referência seus conteúdos nos pontos 3.7 e 3.8;