This post will be on promises in javascript. Promises are used for asynchronous processes where something will take time and it will prevent blocking your code. Promises return a resolve
for a successful operation or a reject
for a failure.
Define a promise as follows and then use .then for the success and .catch for failure. To test the failure condition just change the if
statement to true === false
.
const promiseSimple = new Promise((resolve, reject) => { if (true === true) { resolve(true) } else { reject(false) } }) promiseSimple.then((result) => { console.log(result) }).catch((result) => { console.log(result) })
The example above is not that useful. Usually parameters are passed to a promise. How is that done? Simply wrap the promise with another function as shown below.
const promiseWithParam = (myBoolean) => { return new Promise(function (resolve, reject) { if (myBoolean === true) { resolve(true) } else { reject(false) } }); } promiseWithParam(true).then(function (result) { console.log(result) }).catch((result) => { console.log(result) })
What if you want to do promises one after another, also called a promise chain? You can call one within the .then of the other, but this creates a really bad design pattern call the pyramid of doom.
const promiseWithParam = (myBoolean) => { return new Promise(function (resolve, reject) { if (myBoolean === true) { resolve(true) } else { reject(false) } }); } const promiseWithParam1 = promiseWithParam const promiseWithParam2 = promiseWithParam const promiseWithParam3 = promiseWithParam const promiseWithParam4 = promiseWithParam const promiseWithParam5 = promiseWithParam const promiseWithParam6 = promiseWithParam const promiseWithParam7 = promiseWithParam const myBoolean = true promiseWithParam1(myBoolean).then(function (successResult1) { promiseWithParam2(successResult1).then(function (successResult2) { promiseWithParam3(successResult2).then(function (successResult3) { promiseWithParam4(successResult3).then(function (successResult4) { promiseWithParam5(successResult4).then(function (successResult5) { promiseWithParam6(successResult5).then(function (successResult6) { promiseWithParam7(successResult6).then(function (successResult7) { console.log(successResult7) }).catch((errorResult7) => { console.log(errorResult7) }) }).catch((errorResult6) => { console.log(errorResult6) }) }).catch((errorResult5) => { console.log(errorResult5) }) }).catch((errorResult4) => { console.log(errorResult4) }) }).catch((errorResult3) => { console.log(errorResult3) }) }).catch((errorResult2) => { console.log(errorResult2) }) }).catch((errorResult1) => { console.log(errorResult1) })
You can flatten the pyramid as follows. This is much simpler and needs only one catch statement but still I think .thens are just too hard to read.
const promiseWithParam = (myBoolean) => { return new Promise(function (resolve, reject) { if (myBoolean === true) { resolve(true) } else { reject(false) } }); } const promiseWithParam1 = promiseWithParam const promiseWithParam2 = promiseWithParam const promiseWithParam3 = promiseWithParam const promiseWithParam4 = promiseWithParam const promiseWithParam5 = promiseWithParam const promiseWithParam6 = promiseWithParam const promiseWithParam7 = promiseWithParam const myBoolean = true promiseWithParam1(myBoolean).then(function (successResult1) { return promiseWithParam2(successResult1) }).then(function (successResult2) { return promiseWithParam3(successResult2) }).then(function (successResult3) { return promiseWithParam4(successResult3) }).then(function (successResult4) { return promiseWithParam5(successResult4) }).then(function (successResult5) { return promiseWithParam6(successResult5) }).then(function (successResult6) { return promiseWithParam7(successResult6) }).then(function (successResult7) { console.log(successResult7) }).catch((errorResult) => { console.log(errorResult) })
A better method is to use async/await. The code reads so much better imo.
const asyncPromiseWithParam = async (myBoolean) => { return new Promise(function (resolve, reject) { if (myBoolean === true) { resolve(true) } else { reject(false) } }); } const asyncPromiseWithParam1 = asyncPromiseWithParam const asyncPromiseWithParam2 = asyncPromiseWithParam const asyncPromiseWithParam3 = asyncPromiseWithParam const asyncPromiseWithParam4 = asyncPromiseWithParam const asyncPromiseWithParam5 = asyncPromiseWithParam const asyncPromiseWithParam6 = asyncPromiseWithParam const asyncPromiseWithParam7 = asyncPromiseWithParam const myBoolean = true const asyncFunction = async (myBoolean) => { try { const successResult1 = await asyncPromiseWithParam1(myBoolean) const successResult2 = await asyncPromiseWithParam2(successResult1) const successResult3 = await asyncPromiseWithParam3(successResult2) const successResult4 = await asyncPromiseWithParam4(successResult3) const successResult5 = await asyncPromiseWithParam5(successResult4) const successResult6 = await asyncPromiseWithParam6(successResult5) const successResult7 = await asyncPromiseWithParam7(successResult6) console.log(successResult7) } catch (errorResult) { console.log(errorResult) } } asyncFunction(myBoolean)
Promises are used a lot in javascript and now you know how to use them. Have fun coding with promises :).
If you want to clone our github repo on promises you can find it here. https://github.com/JimmySoftLLC/promises-promise-what