The Promise.all() static method accepts an iterable collection of Promise objects and returns a new Promise. This returned Promise resolves when all input Promises have successfully fulfilled, providing an array containing their resolved values in the same order. If any of the input Promises reject, the resulting Promise immediately rejects with the reason from the first rejection encountered.

When all Promises succeed, the combined Promise resolves successfully, maintainign the original sequence of results. However, if any single Promise fails, the entire combined Promise rejects.

Syntax:

const combinedPromise = Promise.all([promise1, promise2, ...]);
combinedPromise.then(results => {
  // results: [value1, value2, ...]
}).catch(firstError => {
  // Handle the first rejection
});

Example - All Promises Resolve Successfully:

<ul class="weather-list"></ul>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  // Create multiple HTTP requests for weather data
  const beijingRequest = axios({ 
    url: 'https://hmajax.itheima.net/api/weather', 
    params: { city: '110100' } 
  });
  
  const shanghaiRequest = axios({ 
    url: 'https://hmajax.itheima.net/api/weather', 
    params: { city: '310100' } 
  });
  
  const guangzhouRequest = axios({ 
    url: 'https://hmajax.itheima.net/api/weather', 
    params: { city: '440100' } 
  });
  
  const shenzhenRequest = axios({ 
    url: 'https://hmajax.itheima.net/api/weather', 
    params: { city: '440300' } 
  });

  // Execute all requests concurrently
  const weatherData = Promise.all([
    beijingRequest, 
    shanghaiRequest, 
    guangzhouRequest, 
    shenzhenRequest
  ]);
  
  weatherData
    .then(responses => {
      // Process successful responses
      const listItems = responses.map(response => 
        `<li>${response.data.data.area} - ${response.data.data.weather}</li>`
      ).join('');
      
      document.querySelector('.weather-list').innerHTML = listItems;
    })
    .catch(error => {
      console.error('Weather data fetch failed:', error);
    });
</script>

Example - One Promise Fails:

<ul class="weather-list"></ul>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  // Similar setup with one invalid endpoint
  const validRequest1 = axios({ 
    url: 'https://hmajax.itheima.net/api/weather', 
    params: { city: '110100' } 
  });
  
  const validRequest2 = axios({ 
    url: 'https://hmajax.itheima.net/api/weather', 
    params: { city: '310100' } 
  });
  
  const invalidRequest = axios({ 
    url: 'https://hmajax.itheima.net/api/weather3', 
    params: { city: '440100' } 
  });
  
  const validRequest3 = axios({ 
    url: 'https://hmajax.itheima.net/api/weather', 
    params: { city: '440300' } 
  });

  // Attempt to execute all requests
  const mixedResults = Promise.all([
    validRequest1,
    validRequest2, 
    invalidRequest,
    validRequest3
  ]);
  
  mixedResults
    .then(responses => {
      // This block won't execute due to failure
      const listItems = responses.map(response => 
        `<li>${response.data.data.area} - ${response.data.data.weather}</li>`
      ).join('');
      
      document.querySelector('.weather-list').innerHTML = listItems;
    })
    .catch(error => {
      // Error handling for the first failed request
      console.error('One or more requests failed:', error);
    });
</script>