JavaScript Promises Cheatsheet

Table of Contents

A promise represents the eventual result of an asynchronous operation. JavaScript promises were added to the language in ES-2015.

Making promises

new Promise((resolve, reject) => {
    if (ok) {
        resolve(result)
    } else {
        reject(error)
    }
})

For asynchronous programming, see: Promises

Using promises

promise
  .then(result => { ··· })
  .catch(error => { ··· })

Using promises with finally

promise
  .then(result => { ··· })
  .catch(error => { ··· })
  .finally(() => { // logic independent of success/error })

The handler is called when the promise is fulfilled or rejected.

Promise functions

Promise.all(···)
Promise.race(···)
Promise.reject(···)
Promise.resolve(···)

Async-await

async function run() {
    const user = await getUser()
    const tweets = await getTweets(user)
    return [user, tweets]
}

async functions are another way of using promises.

See: async function

Promise.all with async-await

Use Promise.all to execute concurrent asynchronous operations and wait for them all to resolve (or any of them to reject).

Example:

try {
    const [departments, products, cart] = (
        await Promise.all([
            axios.get('/departments'),
            axios.get('/products'),
            axios.get('/cart')
        ])
    ).map(r => r.data)
    this.setState({
        departments,
        products,
        cart,
        loading: false
    })
} catch (e) {
    console.error('ERROR:', e)
    this.setState({ updating: false })
    alert('ERROR: ' + e.message)
}

Related