Promise.all(), Promise.any() as Simple as ABC

Many of us now regard the beloved Javascript Promise API as old fashioned, now that we have async/await. But Promises still have their place and are still very relevant.

But what if you're just beginning to learn Promises and are finding it hard to wrap your head around. Follow me briefly as I quickly explain it with a simple code example.

A promise is a function that helps you write asynchronous code. What this means is that if you make a network request in your program other parts of the program won't have to wait until your network request is complete. I'm sure you must have heard that Javascript is single-threaded, and runs your code from top to bottom.

Javascript Promise API is available to us as a class, all you have to do is to instantiate it as you would a class in OOP.

It takes two arguments, which are functions you use to return the data from your request or the error, if that was the case.

Conventionally, we call the arguments resolve and reject. The former returns your data, while the latter returns error.

Alright, enough talk. Let's see a simple example:

const userPromise = new Promise((resolve, reject) => {
    axios()
    .then((res) => resolve(res.data))
    .catch((error) => reject(error))
})

userPromise
.then((data) => {
    // use data here
})
.catch((error) => {
    // handle error elegantly
    console.log(error)
})

If what you need to make multiple API requests and you want all of them to complete (resolve) before you can do anything with them. You have just the perfect method of that - Promise.all()

This method takes a list of promises or requests that haven't resolved.

It resolves all your promises in a go if all of them went well but return the reject should any fail.

const axios = require('axios') #assumes axios is imported
const userPromise = new Promise((resolve, reject) => {

    const req1 = axios.get('https://reqres.in/api/users/1')
    const req2 = axios.get('https://reqres.in/api/users/2')
    const req3 = axios.get('https://reqres.in/api/users/3')

    Promise.all([req1, req2, req3])
    // # when all of the promises resolve
    .then(promises => resolve(promises))

    // # when any of the promises rejects
    .catch(err => reject(err))
});

userPromise
// #if all 3 reqs went well
.then((listOfPromiseData) => {    
    const users = listOfPromiseData.map(({data}) => data.data.email)
    console.log(users)
})
// if any of reqs went south
.catch((err) => console.log('just err...'))

Remember in the above example all 3 requests must be successful for .all() to resolve. But in other situations you might need just one of the requests to come true to proceed, in such case the candidate is Promise.any(). I'm sure you don't need another example to show this. Use .any() in place .all() and intentionally fail of your requests.

Hope you've learnt something today. Thank you for reading ❤️