JavaScript Promise.all Explained

Let’s look at an example with two functions that retrieve posts and users from the sample endpoints at JSONPlaceholder.

// function1 returns a promise that resolves with posts data
async function function1() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

// function2 returns a promise that resolves with users data
async function function2() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

The two functions access the network independently and each returns a promise. Because we need both the posts and their users, we can wait for both requests with Promise.all:

async function handleFunctions() {
  try {
    const [posts, users] = await Promise.all([function1(), function2()]);
    console.log('Posts:', posts);
    console.log('Users:', users);
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

handleFunctions();