O que significa a função then() em JavaScript

Neste artigo você vai aprender o que significa a função then() em JavaScript, e quais as suas funcionalidades nos programas.

Fala programador(a), beleza? Bora aprender mais sobre Promises e as funções de JavaScript!

Primeiramente é necessário entender que a função then está habilita apenas nas promessas (Promises)

Que é um recurso utilizado para lidar com ações/requisições assíncronas, ou seja, que não acontecem imediatamente

Depois que iniciamos uma Promise, podemos utilizar a função then

Que são os próximos passos da promessa, podemos encadear vários then’s, pois ela nos retorna uma promise também

Esta função pode receber dois argumentos, um sucesso ou um erro, em forma de função e nesta ordem

A função then também pode retornar um dado, que pode ser aproveitado na próxima função then para fazer alguma manipulação

Dando uma estrutura parecida com:

funcaoQueRetornaPromessa()
.then(f1, f2)
.then(f3, f4)
.then(f5, f6)

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Sendo f1 uma função caso a requisição anterior seja um sucesso, e f2 caso for um erro

Talvez o sucesso da função seja garantido, e você não precise de um caso de erro, isso deve ser avaliado no seu programa

Deixe um comentário contando o que achou desta solução 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

No artigo de hoje você aprendeu o que significa a função then() em JavaScript

Basicamente é uma função de encadeamento de ações de uma Promise

Ela pode ser reutilizada várias vezes na mesma promessa

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

O que significa .then em JavaScript?

Resposta curta: o .then() é o método que você chama numa Promise pra dizer "quando isso aqui terminar, faz aquilo"

Ele recebe uma função de callback, roda ela quando a promessa é resolvida e devolve uma NOVA promise

É por isso que dá pra encadear .then().then().then() sem virar aquele ninho de callback que todo mundo odeia 🙂

Agora bora destrinchar isso com calma

Exemplo prático do then() em JavaScript:

Teoria é legal, mas código é melhor, né? Bora ver na prática

function buscarUsuario() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve({ nome: "Matheus" })
}, 1000)
})
}

buscarUsuario()
.then(function (usuario) {
console.log(usuario.nome)
return usuario.nome.toUpperCase()
})
.then(function (nomeMaiusculo) {
console.log(nomeMaiusculo)
})

Repara no fluxo: a função devolve uma Promise, o primeiro then recebe o valor que veio no resolve

E o return de dentro do primeiro then vira o valor que chega no segundo

Se você conhece uma esteira de fábrica, é isso: cada then pega o que saiu da etapa anterior, faz o trabalho dele e passa adiante

O que o then() retorna?

Essa é a parte que mais confunde quem está começando

O then SEMPRE devolve uma promise nova, mesmo que sua função não retorne nada

Aí temos dois casos pra entender:

Se você der return num valor comum (string, número, objeto), esse valor chega direto no próximo then

Se você der return em outra promise, a cadeia ESPERA ela terminar antes de seguir

buscarUsuario()
.then(function (usuario) {
return buscarPedidos(usuario.id)
})
.then(function (pedidos) {
console.log(pedidos)
})

Tome cuidado com o erro clássico: esquecer o return dentro do then

Sem o return, o próximo then recebe undefined e você fica meia hora olhando pro console sem entender nada (já me ferrei com isso)

E se der erro dentro do then?

Aqui mora uma pegadinha que pega muita gente boa

O segundo argumento do then (aquele f2) só trata o erro que veio da promessa ANTERIOR

Se o erro estourar dentro do próprio f1, o f2 do mesmo then não pega

buscarUsuario()
.then(function (usuario) {
throw new Error("deu ruim aqui dentro")
}, function (erro) {
// esse aqui NAO pega o erro de cima
})
.catch(function (erro) {
console.log(erro.message)
})

Por isso, na prática, a maioria dos devs prefere deixar o then só com o caso de sucesso e fechar a cadeia com um .catch() no final

Um catch lá embaixo pega o tombo de qualquer etapa da corrente, fica mais limpo e mais fácil de ler

then() ou async/await: qual usar?

Spoiler: os dois fazem a mesma coisa por baixo dos panos

O await não substitui a Promise, ele só espera a mesma promise resolver e te devolve o valor sem precisar do callback

async function mostrarUsuario() {
const usuario = await buscarUsuario()
console.log(usuario.nome)
}

Esse código faz exatamente o que o .then() do exemplo anterior faz

Então por que aprender then? Porque tu vai encontrar ele em toda API, biblioteca e código legado que cruzar teu caminho

E tem situação em que o encadeamento fica mais direto, tipo disparar uma ação rapidinha depois de uma requisição, sem precisar embrulhar tudo numa função async

Minha régua: fluxo com várias etapas e condicionais, async/await ganha na leitura, uma ação curta depois da promessa, then resolve numa linha

Perguntas frequentes sobre o then() em JavaScript

O que é o .then() em JavaScript?

É o método de uma Promise que define o que acontece quando ela é resolvida, recebendo uma função de callback com o valor do resultado

O then() só funciona em Promise?

Ele funciona em qualquer objeto que tenha um método then, o famoso "thenable", mas no dia a dia isso significa Promise mesmo

Posso encadear vários then na mesma promessa?

Pode, e é justamente o ponto forte dele: como cada then devolve uma promise nova, a corrente segue enquanto você quiser

Qual a diferença entre then e catch?

O then cuida do caminho feliz, o catch cuida do tombo

Na prática, .catch() é um atalho pra um then que só tem o tratamento de erro

Preciso sempre passar dois argumentos no then?

Não, e a leitura fica melhor passando só o sucesso e deixando o erro pro .catch() no fim da cadeia