Deixo aqui então como uma simples forma de compartilhar conhecimento 🤓
Importante: Os textos daqui foram escritos por um Feliphe ainda iniciante, do qual ainda estava em seu processo de aprendizagem. As chances de eu ter cometido uma gafe em algumas das minhas explicações são bem altas! Então é por sua conta em risco.
Para se criar uma nova promise, precisa chamar o objeto construtor dele. No caso, seria o New Promise.
Dentro dessa New Promise, é passada uma função com dois parâmetros, que seriam eles o Resolve e o Reject.
Caso a condição seja true, usa-se o Resolve para retornar uma função. Caso seja false, retorna o que tiver dentro de Reject.
O que é passado na função desses dois parâmetros já é retornado instantaneamente. O método Then é utilizado então para respeitar o tempo em que essa promise é resolvida. Por exemplo, se tiver um setTimeout de 2000 dentro de Resolve, o Then vai esperar dar 2 segundos para ativar a função.
O que é retornado de Then também é uma promise, ou seja, para trabalhar o que está dentro desse escopo, é necessário usar o return e encadear um novo Then. Caso na função não tenha um return, o valor será retornado como undefined.
Junto ao Then, também temos outros métodos que é o Catch e o Finally. No caso do Catch, ele só é ativado quando a promise é rejeitada, mas para economizar código, o Reject também pode ser passado como segundo parâmetro do Then.
Já o Finally, ele é ativado independente do resultado da promise. Se for resolvida ou rejeitada não importa. Mas deve ser passada como uma função anônima, sem parâmetros.
Dois métodos referentes à promise em si, são o Promise.all e o Promise.race. No all é passado uma array com outras promises, e se todas forem resolvidas ou uma delas for rejeitada, a função ocorre. Já no race a primeira que for resolvida ou rejeitada é retornada.
O Fetch é um método utilizado para fazer requisições HTTP. Logo, ele só funciona no servidor.
Para se trabalhar com o conteúdo do Fetch, realizamos um Then, já que o que é retornado é sempre uma promise. Nesta promise, com o parâmetro Response, nos é dado um objeto.
Neste objeto se tem diversos métodos em seu protótipo. Dois desses e os que são mais utilizados são o Json e o Text. O Json geralmente é utilizado para captar itens de um objeto e o Text para retornar textos puros.
Ao utilizar um desses métodos, o resultado é novamente uma promise, e dentro de seu value é o que geralmente esperamos acessar. Para fazer tal acesso, o Then é novamente utilizado, nos dando finalmente o conteúdo em si do Fetch.
Além do Json e do Text, também temos os métodos Blob e Clone. O Blob em si não é de muita utilidade, mas usando a propriedade createObjectURL do JavaScript, somos capazes de transformar uma imagem em um link.
Quando transformamos um Response em um Text ou em um Json, não podemos transformar o body novamente, a não ser que clonamos esse body com o método Clone, utilizando ele então com esse objetivo.
O Async / Await é uma implementação nova do JavaScript e é conhecida por ser uma Syntactical Sugar, ou seja, veio apenas para facilitar a escrita ao trabalhar com promises.
Ao invés de tanto Then, a gente pode substituir isso por uma função do qual ela será Async. Dentro dessa função geralmente terá duas constantes: a primeira será a do Fetch (response), e a segunda no que a gente gostaria de transformar aquela requisição (resolve).
A diferença principal aqui é que agora passamos Await nessas duas constantes, para que assim o JavaScript troque o resultado delas pelas promises já resolvidas, acelerando assim o processo e deixando o código mais clean.
Como em uma promise normal a gente tinha os métodos Then, Catch e Finally, aqui a gente também tem, porém substituímos o Then por Try, onde nesse escopo será passada toda a função que gostaríamos que fosse realizada. Se essa função falhar, ele pula pro Catch.
Um macete para sempre resolver duas ou mais requisições ao mesmo tempo, é não inserir o Await antes do Fetch, e sim, inserir numa constante criada exclusivamente para aguardar a resposta da promise, pois assim, ele só irá continuar quando o Fetch for finalmente requisitado.
Vale ressaltar também que o Await deve ser passado apenas antes de uma promise. Caso não seja, o Await será simplesmente ignorado.
O Fetch nos da a possibilidade de mudar o método de requisição que é feita, para isso, devemos passar essas opções como um segundo parâmetro da função.
Dentro dessas opções, temos 4 tipos de métodos: o GET, que é o método padrão e que simplesmente puxa as informações da URL, o POST, que realiza uma nova entrada no json; O PUT que atualiza uma entrada e o DELETE que apaga a entrada selecionada.
Para usar o POST e o PUT é sempre importante também definirmos o body e as headers do que será postado ou atualizado.
Além destas, também temos o HEAD, do qual puxa as headers da requisição, porém, para isso precisamos fazer um forEach pelo Response, já que só é possível acessar as headers por um método de iteração.
Dependendo da requisição que realizamos, poderemos nos deparar com um problema de CORS. Este no caso é um acordo de segurança servidor/browser. Ele impede que você injete certos tipos de scripts no seu site, evitando assim possíveis brechas no servidor.
Porém, esta política pode ser violada utilizando proxies ou através de plugins que fazem a liberação do Access-Control-Allow-Origin.
O innerHeight como o nome já diz, é a propriedade que te da a altura da janela naquele momento. Se você diminuir ela, o número também diminui. Geralmente em animações ao scroll, ela é multiplicada por uma porcentagem. Por exemplo: window.innerHeight * 0,6 = resultará em um número que representa 60% da altura da janela. Se quiser achar os outros 40%, basta subtrair.
Além do innerHeight, também temos o outerHeight, do qual ele não só pega a altura da página, como também leva em conta a barra de endereços. O innerWidth e outerWidth funcionam da mesma forma, mas no caso deste último, ele também considera a dev tools.
O pageYOffset nos da a altura do scroll até o topo. Sendo 0 o topo, e o fundo da página o valor máximo. O pageXOffset também faz isso, mas agora fazendo a mesma função para o eixo X, ou seja, utilizando a vertical como referência.
O offsetTop ao contrário dos outros métodos daqui, é ligada ao elemento do qual você quer manipular e te da a distância dele pro topo da página. O offsetLeft consiste no mesmo, porém agora nos dando a distância entre o elemento e o canto esquerdo.