Promises em JavaScript: tutorial de then, catch e Promise.all

• maPromesse é a variável que contém o objeto Promise.
• resolve e reject são funções fornecidas pelo construtor Promise.
• O código dentro da função define a ação da promise.
• Se a ação correr bem, chama-se resolve com uma mensagem de sucesso (opcional).
• Se a ação falhar, chama-se reject com uma mensagem de erro (opcional).

Interagir com uma promise

Usam-se os métodos .then() e .catch() para tratar o resultado de uma promise:

maPromesse
 .then((message) => {
    console.log("Succès:", message);
  })
  .catch((erreur) => {
    console.log("Erreur:", erreur);
  });

• O .then() executa-se se a promise for resolvida. A mensagem de sucesso é passada como argumento.
• O .catch() executa-se se a promise for rejeitada. A mensagem de erro é passada como argumento.

Casos de uso

As promises são úteis para gerir operações assíncronas, como descarregar uma imagem de um servidor. Em vez de bloquear o código à espera do fim do download, a promise deixa executar outras ações e tratar o resultado quando este estiver disponível.

Substituir os callbacks

As promises são uma alternativa mais legível aos callbacks encadeados. Eis um exemplo de conversão de uma função com callbacks numa função com promise:

function watchTutorialCallback(successCallback, errorCallback, erreur = false) {
  // ... Código da função ...
  if (erreur) {
    errorCallback("Message d'erreur");
  } else {
    successCallback("Message de succès");
  }
}

function watchTutorialPromise(erreur = false) {
  return new Promise((resolve, reject) => {
    // ... Código da função ...
    if (erreur) {
      reject("Message d'erreur");
    } else {
      resolve("Message de succès");
    }
  });
}

O uso de .then() e .catch() torna o código mais claro e evita o « callback hell ».

Métodos avançados

• Promise.all(): executa várias promises em paralelo e devolve um array com os resultados quando todas estiverem resolvidas.
• Promise.race(): executa várias promises em paralelo e devolve o resultado da primeira que for resolvida ou rejeitada.

Conclusão

As promises são uma ferramenta poderosa para gerir operações assíncronas em JavaScript. Permitem escrever código mais legível e evitar os problemas dos callbacks encadeados. Explora os exemplos do vídeo e pratica para dominares este conceito essencial.

As promises em JavaScript podem parecer complicadas ao princípio, mas na verdade são mais simples do que aparentam. Este tutorial, baseado no vídeo « JavaScript Promises In 10 Minutes » do Web Dev Simplified, guia-te pelos conceitos-chave e pela sintaxe das promises.

Conceito de base

Uma promise em JavaScript funciona como uma promessa na vida real. Comprometes-te a fazer alguma coisa, e esse compromisso pode acabar de duas formas:

• Resolvida (Resolved): a promessa foi cumprida.
• Rejeitada (Rejected): a promessa não pôde ser cumprida.
•  

Sintaxe

Para criar uma promise usa-se o construtor Promise:

const succes = true; // substitua pela sua própria condição

let maPromesse = new Promise((resolve, reject) => {
  // Código para cumprir a promessa
  if (succes) {
    resolve("Message de succès");
  } else {
    reject("Message d'échec");
  }
});

Neste exemplo:

• maPromesse é a variável que contém o objeto Promise.
• resolve e reject são funções fornecidas pelo construtor Promise.
• O código dentro da função define a ação da promise.
• Se a ação correr bem, chama-se resolve com uma mensagem de sucesso (opcional).
• Se a ação falhar, chama-se reject com uma mensagem de erro (opcional).

Interagir com uma promise

Usam-se os métodos .then() e .catch() para tratar o resultado de uma promise:

maPromesse
 .then((message) => {
    console.log("Succès:", message);
  })
  .catch((erreur) => {
    console.log("Erreur:", erreur);
  });

• O .then() executa-se se a promise for resolvida. A mensagem de sucesso é passada como argumento.
• O .catch() executa-se se a promise for rejeitada. A mensagem de erro é passada como argumento.

Casos de uso

As promises são úteis para gerir operações assíncronas, como descarregar uma imagem de um servidor. Em vez de bloquear o código à espera do fim do download, a promise deixa executar outras ações e tratar o resultado quando este estiver disponível.

Substituir os callbacks

As promises são uma alternativa mais legível aos callbacks encadeados. Eis um exemplo de conversão de uma função com callbacks numa função com promise:

function watchTutorialCallback(successCallback, errorCallback, erreur = false) {
  // ... Código da função ...
  if (erreur) {
    errorCallback("Message d'erreur");
  } else {
    successCallback("Message de succès");
  }
}

function watchTutorialPromise(erreur = false) {
  return new Promise((resolve, reject) => {
    // ... Código da função ...
    if (erreur) {
      reject("Message d'erreur");
    } else {
      resolve("Message de succès");
    }
  });
}

O uso de .then() e .catch() torna o código mais claro e evita o « callback hell ».

Métodos avançados

• Promise.all(): executa várias promises em paralelo e devolve um array com os resultados quando todas estiverem resolvidas.
• Promise.race(): executa várias promises em paralelo e devolve o resultado da primeira que for resolvida ou rejeitada.

Conclusão

As promises são uma ferramenta poderosa para gerir operações assíncronas em JavaScript. Permitem escrever código mais legível e evitar os problemas dos callbacks encadeados. Explora os exemplos do vídeo e pratica para dominares este conceito essencial.