PROMISES
Antes de entendermos as Promises
, temos de conhecer as diferenças entre comportamentos síncronos
e assíncronos
.
Síncrono e Assíncrono
Como o próprio nome pode nos ajudar a deduzir, síncrono acontece em sincronia, ou seja, que ocorre em mesmo tempo que outra coisa. Já assíncrono é o oposto, é algo que não acontece junto com outra coisa. Podemos exemplificar esses comportamentos síncronos e assíncronos, como uma chamada de telefone e envio de e-mail, respectivamente.
Sabendo o básico, podemos afirmar que o Javascript é síncrono, sendo executado linearmente de cima para baixo. Isso se deve ao fato que ela é uma linguagem Single Thread
, então cada linha de comando só será executada quando a anterior é finalizada.
console.log('Primeira linha');
console.log('Segunda linha');
console.log('Terceira linha');
console.log('Quarta linha');
console.log('Quinta linha');
Sendo assim, o código acima quando executado, nos retorna:
Primeira linha
Segunda linha
Terceira linha
Quarta linha
Quinta linha
No Javascript temos a função assíncrona setTimeout()
, onde no primeiro parâmetro ela espera uma função e no segundo o tempo que após ser feita a chamada da função, ela será executada, isso em milissegundos.
Sendo assim, vamos analisar o código abaixo:
console.log('Primeira linha');
console.log('Segunda linha');
setTimeout(() => {
console.log('setTimeout');
}, 2000);
console.log('Terceira linha');
console.log('Quarta linha');
console.log('Quinta linha');
Caso a função setTimeout()
fosse síncrona, deveriamos ter o retorno abaixo, já que está sendo chamado na terceira linha:
Primeira linha
Segunda linha
setTimeout
Terceira linha
Quarta linha
Quinta linha
Porém, ela é uma função que não acontece junto com outra coisa -assíncrona - ela só sera retornada com uma condição ou parâmetro, que no caso, é ser executada após 2 segundos, nos retornando:
Primeira linha
Segunda linha
Terceira linha
Quarta linha
Quinta linha
setTimeout
Ou seja, ela executa todas as outras linhas de maneira síncrona, quando chega no setTimeout()
, ela é entregue para uma request separada que é executada fora da thread do Javascript - lembrando que o código que escrevemos é executado em uma única thread - fazendo com que o restante continue a ser executado.
Agora já com o conhecimento de síncrono/assíncrono, podemos tratar das Promises
. Como o próprio nome diz, é uma promessa que pode ou não estar disponível em algum momento, sendo assim, ela possui um comportamento assíncrono.
Promise é um objeto que possui três possíveis estados, sendo eles:
- Pending – Estado inicial, pendente de execução
- Fulfilled – Concluido com sucesso
- Rejected – Ocorreu algum erro
A mesma recebe dois parâmetros, sendo eles comumente chamados de resolve e reject
, sendo assim, apenas um dos métodos de tratamento será chamado. Para acessar a resposta dessa promisse, temos o .then
e o .catch
, sendo responsáveis por tratar a resposta e o erro respectivamente.
O método .then
irá registrar um _callback _de sucesso e é comum executar duas ou mais operações assíncronas consecutivas, executando a ação posterior apenas quando a anterior for bem sucedida, isso é possível realizando o encadeamento do método .then
, onde o mesmo retorna uma nova promise diferente da original.
new Promise((resolve, reject) => {
console.log('Inicio da Promise');
const numero = 10;
resolve(numero);
})
.then((value) => {
console.log(`Primeiro valor: ${value}`);
return value;
})
.then((newValue) => {
console.log(`Valor somado de 5: ${newValue + 5}`);
});
No código foi chamado a função construtora passando os dois parâmetros como argumento e a chamada de uma função callback.
Logo de início já é executado nosso primeiro console.log
e o armazenamento de numero em uma constante, recebendo o valor 10, logo após chamamos nosso resolve(numero)
, passando como resolvida nossa promise e ela recebe esse número.
Agora devemos tratar esse resultado fazendo a chamada do nosso primeiro .then
onde o mesmo recebe um parâmetro value
, esse valor recebe o que foi passado em resolve, logo value
equivale a numero
, sendo assim, chamamos o console.log
desse value
e retornamos ele para que possamos utilizar no próximo encadeamento de .then
, onde iremos tratar o retorno anterior.
Para diferenciarmos, foi passado como parâmetro agora newValue
onde o mesmo recebeu o valor anterior e será tratado no console, sendo acrescido de 5.
O resultado final desse código:
new Promise((resolve, reject) => {
console.log('Inicio da Promise');
const numero = 10;
resolve(numero);
})
.then((value) => {
console.log(`Primeiro valor: ${value}`);
return value;
})
.then((newValue) => {
console.log(`Valor somado de 5: ${newValue + 5}`);
});
Agora iremos tratar a promise caso fosse chamado o reject
:
new Promise((resolve, reject) => {
console.log('Inicio da Promise');
const numero = 10;
reject('Número não identificado');
})
.then((value) => {
console.log(`Primeiro valor: ${value}`);
return value;
})
.then((newValue) => {
console.log(`Valor somado de 5: ${newValue + 5}`);
})
.catch((error) => {
console.log(`Houve um erro: ${error}`);
});
Como fazemos a chamada de reject()
, a função logo irá chamar o método .catch
que também recebe um parâmetro e o mesmo é retornado no console.log()
, renderizando:
Inicio da Promise
Houve um erro: Número não identificado
Um método muito utilizado, é a API fetch que realiza requisições HTTP através de Promises.
Top comments (0)