Promessa JavaScript.any()

Resumo : neste tutorial, você aprenderá como usar o Promise.any()método JavaScript para redigir promessas.

Introdução ao método JavaScript Promise.any()

O Promise.any()método aceita uma lista de objetos Promise como um objeto iterável :

Promise.any(iterable);Linguagem de código:  JavaScript  ( javascript )

Se uma das promessas no objeto iterável for cumprida, o Promise.any()retorna uma única promessa que resolve um valor que é o resultado da promessa cumprida:

Neste diagrama:

• O promise1resolve para um valor v1em t1.
• O promise2resolve para um valor v2em t2.
• O Promise.any()retorna uma promessa que resolve um valor v1, que é o resultado de promise1, emt1

O Promise.any()retorna uma promessa que é cumprida com qualquer primeira promessa cumprida, mesmo que algumas promessas no objeto iterável sejam rejeitadas:

Neste diagrama:

• O promise1é rejeitado com um errorat t1.
• O promise2valor é cumprido v2em t2.
• O Promise.any()retorna uma promessa que resolve um valor v2que é o resultado do promise2. Observe que o Promise.any()método ignora a promessa rejeitada ( promise1).

Se todas as promessas no objeto iterável forem rejeitadas ou se o objeto iterável estiver vazio, o Promise.any()retorno será uma promessa que rejeita com um AggregateErrorcontendo todos os motivos de rejeição. A AggregateErroré uma subclasse de Error.

Neste diagrama:

• O promise1é rejeitado por um error1at t1.
• O promise2é rejeitado por um error2at t2.
• O Promise.any()retorna uma promessa que é rejeitada contendo um t2e de todas as promessas rejeitadas.AggregateErrorerror1error2

Exemplos de JavaScript Promise.any()

Vejamos alguns exemplos de uso do Promise.any()método.

1) Exemplo de todas as promessas cumpridas

O exemplo a seguir demonstra o Promise.any()método com todas as promessas cumpridas:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Promise 1 fulfilled');
    resolve(1);
  }, 1000);
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Promise 2 fulfilled');
    resolve(2);
  }, 2000);
});

const p = Promise.any([p1, p2]);
p.then((value) => {
  console.log('Returned Promise');
  console.log(value);
});
Linguagem de código:  JavaScript  ( javascript )

Saída:

Promise 1 fulfilled
Returned Promise
1
Promise 2 fulfilledLinguagem de código:  JavaScript  ( javascript )

Como funciona.

• Primeiro, crie uma nova promessa p1que será resolvida em um valor 1após um segundo.
• Segundo, crie uma nova promessa p2que será resolvida em um valor 2após dois segundos.
• Terceiro, use o Promise.any()método que usa duas promessas p1e p2. O Promise.any()retorna uma promessa pque será resolvida para o valor 1da primeira promessa cumprida ( p1) após um segundo.

2) Um exemplo de promessa rejeitada

O exemplo a seguir usa o Promise.any()método com uma lista de promessas que possuem uma promessa rejeitada:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Promise 1 rejected');
    reject('error');
  }, 1000);
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Promise 2 fulfilled');
    resolve(2);
  }, 2000);
});

const p = Promise.any([p1, p2]);
p.then((value) => {
  console.log('Returned Promise');
  console.log(value);
});
Linguagem de código:  JavaScript  ( javascript )

Saída:

Promise 1 rejected
Promise 2 fulfilled
Returned Promise
2Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, Promise.any()ignora a promessa rejeitada. Quando the p2resolve com o valor 2, the Promise.any()retorna uma promessa que resolve com o mesmo valor que o resultado do p2.

3) Exemplo de todas as promessas rejeitadas

O exemplo a seguir demonstra como usar o Promise.any()método com todas as promessas rejeitadas:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Promise 1 rejected');
    reject('error1');
  }, 1000);
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Promise 2 rejected');
    reject('error2');
  }, 2000);
});

const p = Promise.any([p1, p2]);
p.catch((e) => {
  console.log('Returned Promise');
  console.log(e, e.errors);
});
Linguagem de código:  JavaScript  ( javascript )

Saída:

Promise 1 rejected
Promise 2 rejected
Returned Promise
[AggregateError: All promises were rejected] [ 'error1', 'error2' ]Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, ambos p1e p2foram rejeitados com a string error1and error2. Portanto, o Promise.any()método foi rejeitado com um AggregateErrorobjeto que possui a errorspropriedade contendo todos os erros das promessas rejeitadas.

Quando usar o método JavaScript Promise.any()

Na prática, você usa o Promise.any()para retornar a primeira promessa cumprida. Uma vez cumprida uma promessa, o Promise.any()método não espera que outras promessas sejam concluídas. Em outras palavras, os Promise.any()curtos-circuitos após o cumprimento de uma promessa.

Por exemplo, você tem um recurso servido por duas ou mais redes de entrega de conteúdo (CDN). Para carregar dinamicamente o primeiro recurso disponível, você pode usar o Promise.any()método.

O exemplo a seguir usa o Promise.any()método para buscar duas imagens e exibir a primeira imagem disponível.

O arquivo index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>JavaScript Promise.any() Demo</title>
    </head>
    <body>
        <script src="js/app.js"></script>
    </body>
</html>Linguagem de código:  JavaScript  ( javascript )

O arquivo app.js

function getImageBlob(url) {
  return fetch(url).then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP status: ${response.status}`);
    }
    return response.blob();
  });
}

let cat = getImageBlob(
  'https://upload.wikimedia.org/wikipedia/commons/4/43/Siberian_black_tabby_blotched_cat_03.jpg'
);
let dog = getImageBlob(
  'https://upload.wikimedia.org/wikipedia/commons/a/af/Golden_retriever_eating_pigs_foot.jpg'
);

Promise.any([cat, dog])
  .then((data) => {
    let objectURL = URL.createObjectURL(data);
    let image = document.createElement('img');
    image.src = objectURL;
    document.body.appendChild(image);
  })
  .catch((e) => {
    console.log(e.message);
  });
Linguagem de código:  JavaScript  ( javascript )

Como funciona.

• Primeiro, defina a getImageBlob()função que usa a API fetch para obter o blob da imagem de uma URL. O getImageBlob()retorna um Promiseobjeto que resolve o blob de imagem.
• Segundo, defina duas promessas que carregam as imagens.
• Terceiro, mostre a primeira imagem disponível usando o Promise.any()método.

Resumo

• Use o método JavaScript Promise.any()para obter uma lista de promessas e retornar uma promessa que seja cumprida primeiro.