Programação para Web I

Há algum tempo, o javascript dispõe de uma API implementada nos navegadores chamada de fetch. Essa API fornece ao javascript uma interface para criar e manipular requisições pelo protocolo HTTP, fornecendo uma alternativa confiável para gerar requisições locais ou remotas usando este protocolo.

Para criar uma requisição HTTP, declaramos a função fetch da seguinte maneira

let url = 'https://pt.wikipedia.org';
fetch(url);

A função fetch no entanto, retorna uma promise, que como visto anteriormente, retorna uma resolução quando tratamos com a função then. Por isso iremos armazenar o resultado da função fetch dentro de uma variável, como no exemplo a seguir:

var url = 'https://pt.wikipedia.org';
let requisicao = fetch(url);

requisicao.then(function(resposta){
    console.log(resposta)
})

A implementação acima implementa um mecanismo que trata a resposta da requisição (quanto esta estiver disponível, lembre-se que isso ocorre de forma assíncrona). Para isso, passamos como argumento da função then uma função, que recebe uma variável resposta que é mostrada no console.

Entretanto, observando a resposta mais de perto, percebemos que a função resposta é apenas um objeto contendo a resposta recebida, cujo o corpo da resposta está codificado em binário (ReadableStream)

Por isso, iremos usar a função text() para tratar o corpo da nossa mensagem e retornar um dado do tipo string para nossa aplicação.

let url = 'https://pt.wikipedia.org';
let requisicao = fetch(url);

requisicao.then(function(resposta){
    return resposta.text()
})

Mas atenção! O retorno dessa função text() também é uma promise! Por isso vamos encapsular todo o retorno em uma função, e tratá-la em seguida:

let url = 'https://pt.wikipedia.org';
let requisicao = fetch(url);

let resposta = requisicao.then(function(resposta){
return resposta.text()
})

resposta.then(function(texto){
console.log(texto)
})

Sendo assim, finalmente temos o resultado final de nossa requisição mostrado no console do navegador. Parabéns! Você já pode fazer requisições e retornar o código fonte de qualquer site disponível na Web =)

Ao receber uma resposta, o corpo de uma mensagem pode receber os seguintes tipos de dados:

• ArrayBuffer
• Blob
• String
• URLSearchParams
• FormData

Podemos extrair o conteúdo usando as respectivas funções:

• arrayBuffer()
• blob()
• text()
• json()
• formData()

Lembre-se de que o resultado das funções acima é sempre uma promise que precisa ser trabalhada de maneira assíncrona com a função then, que sempre recebe uma função callback com um parâmetro (que representa o dado tratado)

Em alguns casos, tentar acessar um endereço usando a API Fetch pode retornar o seguinte erro no console.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://umsitequalquer.com/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

CORS (Cross-Origin Request Blocked) é um mecanismo implementado nos navegadores que impõe certas regras no acesso à recursos entre diferentes domínios. De modo geral, o navegador impede que qualquer resposta que não possua o cabeçalho ‘Access-Control-Allow-Origin’ compatível seja inacessível para o autor da requisição.

Isso acontece pois permitir que um domínio (por exemplo, localhost) acesse os dados de um outro website em que o usuário encontra-se logado, por exemplo, seria uma vunerabilidade séria. Dessa forma, o navegador garante que apenas o dono das respostas (o servidor) determine quem pode ou não realizar requisições.

Do ponto de vista do frontend, não há muito que possa ser feito para solucionar esse tipo de acesso, já que é o servidor que impõe a restrição (geralmente por padrão). Existem alguns proxys que podem ser utilizados ou mesmo addons no navegador, que redirecionam o trafego através de um servidor de terceiros, no entanto isso não é recomendado pela vunerabilidade de utilizar um servidor de terceiros como passagem para os dados

Em 2015, a linguagem javascript incrementou sua sintaxe com o uso de Promises, que ajudam a organizar e extender o uso de callbacks.

Promises são objetos que representam processos assíncronos dentro do script. Uma promisse deve ser iniciada a partir de uma nova função, contendo os valores resolve e reject, que são chamados respectivamente no sucesso ou na falha da promessa.

//Criando uma promessa
let promessa = new Promise(function (resolve, reject) {
    setTimeout(function () {
    if (Math.random() > 0.5) {
        console.log("Promessa resolvida")
        resolve()
    } else {
        console.log("Promessa rejeitada")
        reject()
    }
    }, 3000)
})

//usando uma promessa
promessa.then(function () {
    document.getElementById("log").textContent = "finalizado"
}).catch(function () {
    document.getElementById("log").textContent = "erro"
}).finally(function () {
    console.log("Fim da promessa")
})

Utilizando a API FIPE, implemente um script usando javascript que seja capaz de receber todas as marcas de carro retornadas pela respectivo endpoint e utiliza-los como datalist em um input. Por exemplo:

<label for="marcas">Marca do Carro:</label>
<input type="text" name="marcas" id="marcas" list="listaMarcas">
<datalist id="listaMarcas">
    <option>Acura</option>
    <option>Agrale</option>
    <option>Alfa Romeo</option>
</datalist>

Após escolher a marca, a página deve retornar na tela qual o respectivo código. Caso a marca não seja encontrada, deve-se retornar: "Marca não existente".

Crie uma pokédex contendo uma objeto com pelo menos 10 pokémons. O objeto deve conter número, nome, tipo e descrição e uma URL (local ou remota) com a imagem do pokémon. O usuário pode excluir, modificar ou inserir novos pokémons(com todas as suas informações). Ao final, deve-se apresentar um botão 'Showcase' que exibe imagem e nome dos pokémons a cada 3 segundos. Utilize CSS para estilizar o projeto à sua maneira =)

As informações podem ser retiradas diretamente desta API: https://pokeapi.co/

Crie um formulário que permita ao usuário digitar um texto longo (elementotextarea), e que retorne em uma div a quantidade de ocorrências para cada um dos seguintes itens:espada,arco e escudo