var doggies = ['dog1.png', 'dog2.png', 'dog3.png', 'dog4.png', 'dog5.png']
// call getImage on each array element and return array of promises:
var doggypromises = doggies.map(getImage)

Promise.all(doggypromises).then(function(urls){
	console.log("Images loaded: " + urls)
}).catch(function(urls){
	console.log("Error fetching some images: " + urls)
})

Promise.all() is an all or nothing proposition- if one of the promises inside the iterable fails to load, the promise returned by Promise.all() is rejected, and the catch() method added to it is called instead.

The then() and catch() methods following Promise.all() is passed an array of data returned by each resolve(data) or reject(data) method of each promise contained in the iterable.

// call getImage() on two images and return array of promises:
var doggypromises = [getImage('dog1.png'), getImage('dog2.png')] 

Promise.race(doggypromises).then(function(url){
	console.log("First doggy to load: " + url)
}).catch(function(url){
	console.log("First doggy that failed to load: " + url)
})

The then() and catch() methods following Promise.race() is passed the data returned by the resolve(data) or reject(data) method of the promise that was resolved/rejected first.

var rejection = Promise.reject("Amy")

rejection.then(
	function(data){
		// not executed
	},
	function(data){
		console.log(data + " rejected me!") // logs Amy rejected me!
	}
)

The above is identical to:

var rejection = Promise.reject("Amy")

rejection.catch(function(data){
	console.log(data + " rejected me!") // logs Amy rejected me!
})

var sequence = Promise.resolve()
var myarray = [1,2,3,4,5]

myarray.forEach(function(element){
	sequence = sequence.then(function(){
		var el = element
		return new Promise(function(resolve, reject){
			setTimeout(function(){
				resolve(el)
			}, 1000) // resolve each promise after 1 second
		})
	}).then(function(data){
		console.log(data) // logs 1,2,3,4,5 one number per second
	})
})

The following example uses the getImage() function at the very top of the page to perform two different actions based on whether an image has successfully loaded or not:

getImage('dog1.png').then(
	function(successurl){
		var dog = document.createElement('img')
		dog.setAttribute('src', successurl)
		document.body.appendChild(dog)
	},
	function(errorurl){
		console.log('Error loading ' + errorurl)
	}
)

Functionally this is similar to the following:

getImage('dog1.png').then(function(successurl){
	var dog = document.createElement('img')
	dog.setAttribute('src', successurl)
	document.body.appendChild(dog)
}).catch(function(errorurl){
	console.log('Error loading ' + errorurl)
})

Returning a value or promise inside the then() method

Inside a then() method, you can either return a value or another promise. In the case of the former, the return value is simply passed onto the next then() method added to the promise:

var p = new Promise(function(resolve, reject){
	resolve('Mary')
})

p.then(function(friend){
	console.log(friend) // logs "Mary"
	return 'John'
}).then(function(friend){
	console.log(friend) // logs "John"
})

However, if you return a promise inside then() instead of a static value, the next then() waits for the resolution of that promise before executing.

function stutter(name){
	return new Promise(function(resolve, reject){
		setTimeout(function(){ // delay resolution of promise
			resolve(name)
		}, 1000)
	})
}

var p = new Promise(function(resolve, reject){
	resolve('Mary')
})

p.then(function(friend){
	console.log(friend) // logs "Mary" immediately
	return stutter('John')
}).then(function(friend){
	console.log(friend) // logs "John" after 1 sec
	return stutter('George')
}).then(function(friend){
	console.log(friend) // logs "George" after 2 sec
})