{"id":860,"date":"2024-05-06T19:33:37","date_gmt":"2024-05-06T22:33:37","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=860"},"modified":"2025-11-13T21:43:17","modified_gmt":"2025-11-14T00:43:17","slug":"promises-no-javascript","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/promises-no-javascript\/","title":{"rendered":"Promises no Javascript"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Promises no Javascript<\/strong>: No JavaScript moderno, as Promises<\/strong> s\u00e3o a principal ferramenta para gerenciar o c\u00f3digo ass\u00edncrono. Uma Promise<\/strong> \u00e9 um objeto que atua como um “placeholder”<\/strong> (valor substituto) para o resultado eventual (sucesso ou falha) de uma opera\u00e7\u00e3o ass\u00edncrona.<\/p>\n\n\n\n

Elas resolvem os problemas de aninhamento e tratamento de erros dos Callbacks<\/em>, fornecendo uma estrutura mais clara e encade\u00e1vel.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Os Tr\u00eas Estados de uma Promise<\/h2>\n\n\n\n

Uma Promise \u00e9 um objeto de estado finito. Uma vez que o estado muda de pending<\/code> para fulfilled<\/code> ou rejected<\/code>, ele n\u00e3o pode mudar novamente<\/strong>.<\/p>\n\n\n\n

Estado<\/strong><\/td>Significado<\/strong><\/td>Como Transiciona<\/strong><\/td><\/tr><\/thead>
pending<\/code><\/strong><\/td>Pendente.<\/strong> A opera\u00e7\u00e3o ass\u00edncrona ainda n\u00e3o terminou.<\/td>Estado inicial.<\/td><\/tr>
fulfilled<\/code><\/strong><\/td>Resolvida\/Sucesso.<\/strong> A opera\u00e7\u00e3o foi conclu\u00edda com sucesso e retornou um valor.<\/td>Chama resolve(valor)<\/code>.<\/td><\/tr>
rejected<\/code><\/strong><\/td>Rejeitada\/Falha.<\/strong> A opera\u00e7\u00e3o falhou e retornou um erro.<\/td>Chama reject(erro)<\/code>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Exemplo B\u00e1sico de Cria\u00e7\u00e3o<\/h3>\n\n\n\n

Voc\u00ea cria uma Promise manualmente usando o construtor Promise<\/code>, que recebe uma fun\u00e7\u00e3o executora com dois argumentos: resolve<\/code> e reject<\/code>.<\/p>\n\n\n\n

JavaScript<\/p>\n\n\n\n

const buscarDados = new Promise((resolve, reject) => {\n  let sucesso = Math.random() > 0.5;\n  \n  setTimeout(() => {\n    if (sucesso) {\n      resolve(\"Dados carregados!\"); \/\/ Muda o estado para fulfilled\n    } else {\n      reject(new Error(\"Erro de conex\u00e3o.\")); \/\/ Muda o estado para rejected\n    }\n  }, 1000);\n});\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. Consumindo Promises: then()<\/code>, catch()<\/code> e finally()<\/code><\/h2>\n\n\n\n
Para lidar com o resultado de uma Promise, voc\u00ea usa m\u00e9todos que se conectam aos seus estados finais.<\/p>\n\n\n\n
<\/div>\n\n\n\n
A. .then()<\/code><\/h3>\n\n\n\n
Usado para agendar uma callback<\/em> para quando a Promise for resolvida (fulfilled<\/code>)<\/strong>. O .then()<\/code> aceita dois argumentos: a fun\u00e7\u00e3o de sucesso e, opcionalmente, a fun\u00e7\u00e3o de falha.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
buscarDados.then(\n  (resultado) => {\n    console.log(\"Sucesso:\", resultado); \/\/ Lida com o 'resolve'\n  },\n  (erro) => {\n    console.error(\"Falha:\", erro.message); \/\/ Lida com o 'reject'\n  }\n);\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
B. .catch()<\/code><\/h3>\n\n\n\n
Uma forma mais clara e recomendada de lidar com erros. Ele \u00e9 um atalho para .then(null, onRejected)<\/code>.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
buscarDados\n  .then((resultado) => console.log(resultado))\n  .catch((erro) => console.error(\"Erro capturado:\", erro.message)); \/\/ Lida com qualquer reject anterior\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
C. .finally()<\/code><\/h3>\n\n\n\n
Executa um c\u00f3digo sempre<\/strong> que a Promise \u00e9 finalizada (seja fulfilled<\/code> ou rejected<\/code>). \u00c9 \u00fatil para tarefas de limpeza.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
buscarDados.finally(() => {\n  console.log(\"Promise finalizada. O carregamento acabou.\");\n});\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
3. Encapsulamento de Promises (Chaining<\/em>)<\/h2>\n\n\n\n
A maior vantagem das Promises \u00e9 o seu encadeamento. Quando um .then()<\/code> retorna um valor (n\u00e3o uma Promise), o pr\u00f3ximo .then()<\/code> recebe esse valor. Crucialmente, quando um .then()<\/code> retorna outra Promise<\/strong>, a cadeia pausa<\/strong> e espera que a nova Promise seja resolvida antes de continuar.<\/p>\n\n\n\n
Isso elimina o aninhamento profundo:<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
buscarDados \/\/ Promise 1\n  .then((dados) => {\n    console.log(\"1. Processado:\", dados);\n    return dados.toUpperCase(); \/\/ Retorna um VALOR, que vai para o pr\u00f3ximo .then\n  })\n  .then((dadosUpper) => {\n    console.log(\"2. Transformado:\", dadosUpper);\n    return outraFuncaoAssincrona(dadosUpper); \/\/ Retorna uma NOVA PROMISE 2. A cadeia PAUSA aqui.\n  })\n  .then(() => {\n    console.log(\"3. Sucesso ap\u00f3s a Promise 2.\"); \/\/ S\u00f3 executa ap\u00f3s a Promise 2 terminar\n  })\n  .catch((erro) => {\n    \/\/ Captura qualquer erro de Promise 1, Promise 2, ou de qualquer .then intermedi\u00e1rio.\n    console.error(\"Erro na cadeia:\", erro);\n  });\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
4. Gerenciando M\u00faltiplas Promises<\/h2>\n\n\n\n