This tutorial will teach you how to use Promise await in JavaScript.

In this tutorial, I will teach you about the Promise.all() and Promise.allSettled() methods and how to use them to handle multiple Promises.

Use Promise.all() method

Promise object has three useful methods named then(), catch() and finally(), You can use them to execute callback methods when the Promise completes. p>

Promise.all() The method is a static method, which means that it belongs to the entire class and is not bound to any specific instance of the class. It accepts an iterable of Promise as input and returns a single Promise object.

As I mentioned before, the Promise.all() method returns a new Promise. If all promises passed to this method have resolved successfully, this new promise will resolve to an array of determined promise values. Once one of the passed promises is rejected, this new promise will also be rejected.

All Promises were resolved successfully

The following is an example of the Promise.all() method where all Promises are resolved successfully:

const promise_a = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Loaded Textures');
  }, 3000);
});

const promise_b = new Promise((resolve) => {
    setTimeout(() => {
      resolve('Loaded Music');
    }, 2000);
});

const promise_c = new Promise((resolve) => {
    setTimeout(() => {
      resolve('Loaded Dialogues');
    }, 4000);
});


const promises = [
  promise_a, promise_b, promise_c
];

console.log('Hello, Promises!');

Promise.all(promises).then((values) => {
  console.log(values);
  console.log('Start the Game!');
});

/* Output

19:32:06 Hello, Promises!
19:32:10 Array(3) [ "Loaded Textures", "Loaded Music", "Loaded Dialogues" ]
19:32:10 Start the Game!

*/

The statement before we call the Promise.all() method was recorded at 19:32:06. Additionally, our third Promise named promise_c takes the longest to resolve and resolves after 4 seconds. This means that the Promise returned by calling the all() method should also take 4 seconds to resolve. We can verify if it takes 4 seconds to resolve by passing the callback function to the then() method.

Another important thing to note here is that the returned array of completed values ??contains the values ??in the same order in which we passed the Promise to the Promise.all() method. The Promise named promise_b is the fastest to resolve, taking only 2 seconds. However, its parsed value is still at the second position in the returned array. This matches where we passed the Promise to the Promise.all() method.

The maintenance of this order can be very helpful in some situations. For example, let's say you are using ten different Promises to get weather information about ten different cities. All these problems will not be solved simultaneously, and it is impossible to know in advance the order in which they will be solved. However, if you know that the data is returned in the order in which the Promise was passed, you will be able to correctly allocate it for later operations.

A promise rejected

The following is an example of one of the promises being rejected:

const promise_a = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Loaded Textures');
  }, 3000);
});

const promise_b = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Could Not Load Music'));
    }, 2000);
});

const promise_c = new Promise((resolve) => {
    setTimeout(() => {
      resolve('Loaded Dialogues');
    }, 4000);
});


const promises = [
  promise_a, promise_b, promise_c
];

console.log('Hello, Promises!');

Promise.all(promises).catch((error) => {
  console.error(error.message);
  console.log('Stop the Game!');
});

/* Output

20:03:43 Hello, Promises!
20:03:45 Could Not Load Music
20:03:45 Stop the Game!

*/

Similarly, our statement before calling the all() method is recorded at 20:03:43. However, our second promise promise_b ended in rejection this time. We can see promise_b is rejected after 2 seconds. This means that the Promise returned by the all() method should also be rejected after 2 seconds with the same error as our promise_b. It's obvious from the output that this is exactly what happens.

Used with the await keyword

You may already know that the await keyword is used to wait for a promise to resolve before proceeding to the next step. We also know that the all() method returns a promise. This means we can use await along with a call to the Promise.all() method.

The only thing to remember is that since await only works inside async functions and modules, we have to wrap the code inside an async function like this:

function create_promise(data, duration) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data);
    }, duration);
  });
}

const promise_a = create_promise("Loaded Textures", 3000);
const promise_b = create_promise("Loaded Music", 2000);
const promise_c = create_promise("Loaded Dialogue", 4000);

const my_promises = [promise_a, promise_b, promise_c];

async function result_from_promises(promises) {
  let loading_status = await Promise.all(promises);
  console.log(loading_status);
}

result_from_promises(my_promises);

/* Outputs

08:50:43 Hello, Promises!
08:50:47 Array(3) [ "Loaded Textures", "Loaded Music", "Loaded Dialogue" ]

*/

This time, we define a function called create_promise() which creates a promise for us based on the data and duration provided. Our asynchronous result_from_promises() function uses the await keyword to wait for a Promise to resolve.

Use Promise.allSettled() method

It makes sense to use the Promise.all() method when you only want to proceed after all promises have resolved successfully. This might be useful, for example, when you're loading game assets.

But suppose you are getting information about the weather in different cities. In this case, you can output weather information for all cities where data acquisition was successful, and output an error message if data acquisition failed.

Promise.allSettled() method works best in this case. This method waits for all passed commitments to be resolved via resolution or rejection. The Promise returned by this method contains an array of objects containing information about the result of each Promise.

function create_promise(city) {
  let random_number = Math.random();
  
  let duration = Math.floor(Math.random()*5)*1000;

  return new Promise((resolve, reject) => {
    if (random_number < 0.8) {
      setTimeout(() => {
        resolve(`Show weather in ${city}`);
      }, duration);
    } else {
      setTimeout(() => {
        reject(`Data unavailable for ${city}`);
      }, duration);
    }
  });
}

const promise_a = create_promise("Delhi");
const promise_b = create_promise("London");
const promise_c = create_promise("Sydney");

const my_promises = [create_promise("Delhi"), create_promise("London"), create_promise("Sydney"), create_promise("Rome"), create_promise("Las Vegas")];

async function result_from_promises(promises) {
  let loading_status = await Promise.allSettled(promises);
  console.log(loading_status);
}

result_from_promises(my_promises);

/* Outputs

[
  {
    "status": "fulfilled",
    "value": "Show weather in Delhi"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in London"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in Sydney"
  },
  {
    "status": "rejected",
    "reason": "Data unavailable for Rome"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in Las Vegas"
  }
]

*/

如您所見，數(shù)組中的每個(gè)對象都包含一個(gè) status 屬性，讓我們知道承諾是否已實(shí)現(xiàn)或被拒絕。在履行承諾的情況下，它包含 value 屬性中的解析值。在被拒絕的 Promise 的情況下，它在 reason 屬性中包含拒絕的原因。

最終想法

我們了解了 Promise 類的兩個(gè)有用方法，它們可以讓您同時(shí)處理多個(gè) Promise。當(dāng)您想要在其中一個(gè) Promise 被拒絕后立即停止等待其他 Promise 解決時(shí)， Promise.all() 方法很有用。當(dāng)您想要等待所有承諾解決時(shí)，無論其解決或拒絕狀態(tài)如何， Promise.allSettled() 方法非常有用。

The above is the detailed content of Using Promise.all() and Promise.allSettled() methods in JavaScript. For more information, please follow other related articles on the PHP Chinese website!