Promises

ES2015 vs ES2020

What is Promises?

1. Async API/approach in ECMAScript

2. Released 5 years ago (ES2015), in use more than 10 years

3. Based on Promises/A+ specification

4. Used in many JS API's - SW, Fetch, FileSystem and etc

5. Had strong limitation, need to be improved. You can't cancel promise, for example.

Promises limitations

1. State can be changed once

2. Can't be cancelled

- pending

------> fullfilled

------> rejected

What is cancelled? Rejected or pending forever?

ES2015 Promises API

new Promise((resolve, reject) => {})

Promise.prototype.then(onFulfilled, onRejected)

Promise.prototype.catch(onReject) - same as then(undefined, onRejected)

Promise.all(iterable) - All fulfilled or one is rejected

Promise.race() - first fulfilled or rejected

Promise.reject()

Promise.resolve()

Examples Promises ES2015

new Promise((resolve, reject) => {
	throw 123
})
.then(console.log.bind(console, '1 fine'))
.then(console.log.bind(console, '2 fine'))
.then(console.log.bind(console, '3 fine'))
.catch(console.log.bind(console, 'catched')) // catched 123

new Promise((resolve, reject) => {
	resolve(123)
})
.then(console.log.bind(console, '1 fine') , console.error.bind(console,'1 error')) // 1 fine 123
.then(console.log.bind(console, '2 fine') , console.error.bind(console,'2 error')) // 2 fine undefined
.then(console.log.bind(console, '3 fine') , console.error.bind(console,'3 error')) // 3 fine undefined
.catch(console.log.bind(console, 'catched'))

new Promise((resolve, reject) => {
	reject(123)
})
.then(console.log.bind(console, '1 fine') , console.error.bind(console,'1 error')) // 1 error 123
.then(console.log.bind(console, '2 fine') , console.error.bind(console,'2 error')) // 2 fine undefined
.then(console.log.bind(console, '3 fine') , console.error.bind(console,'3 error')) // 3 fine undefined
.catch(console.log.bind(console, 'catched'))

ES2020 Promises API

ES2015 API + something:

new Promise((resolve, reject) => {
	throw 123
})
.then(console.log.bind(console, '1 fine'))
.then(console.log.bind(console, '2 fine'))
.finally(console.log.bind(console, '2 finally')) // 2 finally
.then(console.log.bind(console, '3 fine'))
.catch(console.log.bind(console, 'catched')) // catched 123

Promise.prototype.finally(onFinally) - execute always

const p1 = new Promise(resolve => resolve(111))
const p2 = new Promise((resolve, reject) => reject(222))
const p3 = new Promise(resolve => resolve(333))

Promise.allSettled([p1, p2, p3]).then(console.log)

Promise.allSettled(iterable) - wait will all promises rejected or fulfilled

Promise.prototype.finally

new Promise((resolve, reject) => {
	resolve(123)
})
.finally(console.log.bind(console, '1 finally')) // 1 finally
.then(console.log.bind(console, '1 fine')) // 1 fine 123

- Prevent code duplication in then() и catch()

- Doesn't receive any arguments

Promise.allSettled

const p1 = new Promise(resolve => resolve(111))
const p2 = new Promise((resolve, reject) => reject(222))
const p3 = new Promise(resolve => resolve(333))

Promise.allSettled([p1, p2, p3]).then(response => console.log(JSON.stringify(response, null, 4)))

/*
[
    {
        "status": "fulfilled",
        "value": 111
    },
    {
        "status": "rejected",
        "reason": 222
    },
    {
        "status": "fulfilled",
        "value": 333
    }
]
*/

Bonus

Promise.any

Promise.any(promises).then(
  (first) => {
    // Any of the promises was fulfilled.
  },
  (error) => {
    // All of the promises were rejected.
    // error is an AggregateError, a new Error subclass that groups together individual errors. 
    // Every AggregateError instance contains a pointer to an array of exceptions.
  }
);

Promise.any accepts an iterable of promises and returns a promise that is fulfilled by the first given promise to be fulfilled, or rejected with an array of rejection reasons if all of the given promises are rejected.

Promises ES2015 vs ES2020

Promises ES2015 vs ES2020. All about new features in ES2020 and upcoming changes in next years.

Sasha Pinchuk

pin_al