Introdução

JavaScript é uma linguagem de programação de thread único, o que significa que só pode executar uma tarefa por vez. Isso se torna complicado com operações assíncronas, como busca de dados ou configuração de temporizadores, que podem bloquear o fluxo de execução e tornar seu aplicativo mais lento.

Para lidar com essas tarefas assíncronas sem congelar o thread, encontramos o Promise — uma ferramenta poderosa que simplifica a programação assíncrona. Com Promises, você pode gerenciar tarefas de longa duração com mais eficiência, escrever códigos mais limpos e legíveis e evitar o temido "inferno de retorno de chamada."

Neste artigo, pretendo familiarizá-lo com o que são Promessas, como funcionam e como simplificam a programação assíncrona.

O que é uma promessa?

Imagine que você está pedindo uma refeição em um restaurante. Depois de fazer seu pedido, você não espera na cozinha para que sua comida seja preparada. Em vez disso, você conversa ou aproveita o ambiente enquanto a cozinha prepara sua refeição ao fundo. O restaurante promete servir a comida assim que estiver pronta. Você pode confiar nessa promessa porque, eventualmente, uma de duas coisas acontecerá: ou sua refeição chegará (cumprida) ou a cozinha informará que não será possível concluir o pedido (rejeitado ).

Em JavaScript, Promessas funcionam de maneira semelhante. Quando você pede ao JavaScript para fazer algo que leva tempo, como buscar dados de um servidor, ele retorna uma Promessa. Esta Promessa não fornece o resultado imediatamente. Em vez disso, ele diz: “Entrarei em contato com você quando o trabalho estiver concluído.” Durante esse tempo, o restante do seu código continua em execução. Assim que a tarefa for concluída, a Promessa será:

• Cumprida (a tarefa foi bem-sucedida) ou
• Rejeitado (a tarefa falhou) e você pode lidar com o resultado de acordo.

Como as promessas funcionam em JavaScript

Uma Promessa representa um valor que pode estar disponível agora, no futuro ou nunca. Possui três estados:

• Pendente: A tarefa ainda está em andamento e o resultado final (cumprido ou rejeitado) ainda não foi determinado.
• Cumprida: A tarefa foi concluída com sucesso e o resultado está disponível.
• Rejeitado: a tarefa falhou e um erro está disponível para ser tratado

1. Criando uma promessa

Para criar uma Promise, você usa o construtor Promise, que usa uma função (conhecida como executor) que possui dois parâmetros: resolver e rejeitar. A função de resolução é chamada quando a Promessa é cumprida, enquanto a função de rejeição é chamada quando é rejeitada.

const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});

2. Resolver e rejeitar promessas

Depois que uma Promessa for criada, você poderá decidir seu resultado chamando resolve ou rejeitar:

• resolve (valor): Chame esta função quando a operação assíncrona for concluída com sucesso. Ele passa um valor para os manipuladores que estão aguardando o cumprimento da promessa.
• rejeitar (erro): Chame esta função quando a operação falhar. Ele passa uma mensagem de erro para os manipuladores que estão aguardando a rejeição da promessa.

3. Consumir promessas

Depois de criar uma Promessa, o próximo passo é consumi-la. JavaScript fornece vários métodos para lidar com os resultados de promessas: .then(), .catch() e .finalmente(). Cada um desses métodos serve a um propósito específico e permite gerenciar com eficácia os resultados de operações assíncronas.

• Tratamento de promessas resolvidas com .then(): O método .then() é usado para especificar o que deve acontecer quando uma Promessa for cumprida. São necessários dois argumentos opcionais: um retorno de chamada para o valor resolvido e outro para lidar com rejeições.

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
};

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  });

• Tratamento de rejeições com .catch(): O método .catch() foi projetado especificamente para lidar com erros que ocorrem durante a execução da Promessa. Isso o torna uma maneira limpa de lidar com rejeições.

const fetchWithError = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Error fetching data."); // Simulating an error
    }, 1000);
  });
};

fetchWithError()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error); // Logs: Error fetching data.
  });

• Ações finais ou de limpeza usando .finally(): O método .finally() permite que você execute o código após a Promessa ter sido liquidada, independentemente de ela ter sido cumprida ou rejeitada. Isto é útil para ações ou tarefas de limpeza que devem ser executadas em cenários de sucesso e falha.

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  })
  .catch(error => {
    console.error(error); // Handle error
  })
  .finally(() => {
    console.log("Promise has settled."); // Logs after either success or failure
  });

Para ser conciso:

• then(): Use este método para lidar com o valor resolvido de uma promessa.
• catch(): Use este método para lidar com erros quando uma promessa é rejeitada.
• finalmente(): Este método executa o código após a promessa ser estabelecida, independentemente do resultado, permitindo a limpeza ou ações finais.

4. Encadeamento de promessas

Um dos recursos mais poderosos do Promises é sua capacidade de serem encadeados, permitindo que você execute várias operações assíncronas em sequência. Isso significa que cada operação aguarda a conclusão da anterior antes de ser executada, o que é particularmente útil quando as tarefas dependem umas das outras.

Vamos dar uma olhada no seguinte exemplo:

const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ userId: 1, username: "JohnDoe" });
    }, 1000);
  });
};

const fetchPosts = (userId) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(["Post 1", "Post 2", "Post 3"]); // Simulated posts
    }, 1000);
  });
};

// Chaining Promises
fetchUserData()
  .then(user => {
    console.log("User fetched:", user);
    return fetchPosts(user.userId); // Pass userId to the next promise
  })
  .then(posts => {
    console.log("Posts fetched:", posts);
  })
  .catch(error => {
    console.error("Error:", error);
  });

Neste exemplo, a função fetchUserData retorna uma Promise que é resolvida com informações do usuário. O valor resolvido é então passado para a função fetchPosts, que retorna outra Promise. Se alguma dessas promessas for rejeitada, o erro será detectado no método .catch() final, permitindo um tratamento eficaz de erros em toda a cadeia.

Conclusão

Concluindo, as promessas são uma parte crucial do JavaScript moderno, permitindo aos desenvolvedores lidar com operações assíncronas de uma forma mais estruturada e eficiente. Ao usar Promessas, você pode:

• Simplifique o gerenciamento de tarefas assíncronas e evite o inferno de retorno de chamada.
• Cadeie várias operações assíncronas para manter um fluxo de execução claro.
• Trate erros de maneira eficaz com uma abordagem unificada.

Ao implementar Promises em seus próprios projetos, você descobrirá que elas não apenas melhoram a legibilidade do código, mas também melhoram a experiência geral do usuário, mantendo a capacidade de resposta dos seus aplicativos. Espero que esta jornada pelos conceitos fundamentais do JavaScript tenha fornecido informações valiosas para os desenvolvedores. Boa codificação!