A Jornada do 'fetch()' até as Promises!"

Promise: 4horas de estudos resumidos

Dediquei 4 horas ao estudo deste objeto para compreender a sua sintaxe, quando utilizá-lo e como pode ser requisitado em expressões como o fetch(). O tempo investido é uma incógnita, não podendo afirmar se está relacionado à complexidade do conteúdo ou à complexidade cognitiva do autor (risos). Independentemente da resposta, estou mais confiante em minha compreensão.

O que é uma função construtora?

O método convencional para criar um objeto é também chamado de abordagem literal. No entanto, em determinadas situações, essa abordagem pode resultar em muitas linhas de código. Para simplificar, utiliza-se a função construtora, que gera novos objetos sempre que invocada.

**//ABORDAGEM LITERAL:**

**const endereco = {
  rua: "Rua Dez",
  numero: 0,
  cep: '12665-320'
} 

//"rua" é uma propriedade
// 'Rua Dez' é o valor**

Imagine que em algum contexto fosse preciso criar mais de um objeto com propriedades quase que semelhantes. Com certeza muitas linhas de código seriam usadas. Para simplificar usamos a Função Construtora:

function Data (d,m,a) {
  this.dia = d
  this.mes = m
  this.ano = a
      this.exibir = function()
               {return `${this.dia}/${this.mes}/${this.ano}`}
}

const data01 = new Data(16,07,1999) 
const data02 = new Data(18,04,2012) 
console.log(data01)  

//"Data, nesse caso nome da construtora;
//'this' é usada para se referir ao objeto ao qual a função pertence ou está associada
//'new' usado para criar uma nova instância do Data (um novo objeto)
// data01 e data02 passam a ser novos objetos.**
 

O que é a Promise?

Uma operação assíncrona é uma operação que não ocorre imediatamente no ponto em que é chamada. Em vez disso, ela é programada para ser executada em algum momento no futuro, e o restante do código pode continuar a ser executado sem esperar que a operação seja concluída.

Ex: uma requisição GET (pedido de recurso) a um servidor externo depende de variáveis como velocidade da internet do cliente solicitante e do processamento interno da requisição pelo servidor.

A Promise é um objeto JavaScript que representa a “promessa” de que em algum momento será entregue uma resposta: conclusão ou falha de uma operação assíncrona. Ela é resultante de uma função construtora em que se usa a palavra-chave new mais uma função construtora Promise() para criar uma nova instância.

Dentro de uma promessa (Promise) em JavaScript, usamos resolve e reject, esses parâmetros são callbacks (funções de retorno de chamada) quem lidam com o resultado bem-sucedido ou malsucedido da operação assíncrona associada à promessa.

//**********************************EXEMPLOS DE USO:*****************************

const minhaPromise = new Promise((resolve, reject) => {
// Alguma operação assíncrona

if (/* operação foi bem-sucedida */) {
  resolve('Operação bem-sucedida!');
} else {
  reject('Ocorreu um erro na operação.');
}
});

minhaPromise 
.then((resultado) => {
  console.log('Sucesso:', resultado); //output: Sucesso: Operação bem-sucedida!
})
.catch((erro) => {
  console.error('Erro:', erro); //output: Erro: Ocorreu um erro na operação.
});

//**resolve e reject**: são parâmetro e também calbacks
// **then:** quando Sucesso. Também permite encadeamento de promessas;
// **catch:** quando Erro, tratamento de erros;




/***********************************TRECHO DO CÓDIGO A CIMA*********************/

minhaPromise 

/* aqui chamamos a Promise, o valor passado para resolve 
será passado para o parâmetro "resultado": */

.then((resultado) => {  
  console.log('Sucesso:', resultado);
})

/* aqui chamamos a Promise, o valor passado para reject 
será passado para o parâmetro "erro": */

.catch((erro) => {
  console.error('Erro:', erro);
});

Conclusão:

O fetch em JavaScript está intrinsecamente ligado ao conceito de Promises. Quando você faz uma requisição usando fetch, ele retorna uma Promise que eventualmente será resolvida com a resposta da requisição. Essa abordagem assíncrona permite que você realize operações enquanto aguarda a conclusão da requisição, sem bloquear a execução do código. Dessa forma, você pode encadear métodos como then e catch para lidar com o resultado da Promise, seja ele uma resposta bem-sucedida ou um erro. Isso melhora a legibilidade e a manutenção do código, tornando mais fácil entender o fluxo assíncrono.