Created
December 17, 2018 17:13
-
-
Save OriginUnknown/c5d6d2338400b57cc46ae4eacb3bd0c6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const flour = () => new Promise((resolve, reject) => { | |
setTimeout(() => { | |
resolve('Flour') | |
}, 3000) | |
}); | |
const milk = () => new Promise((resolve, reject) => { | |
setTimeout(() => { | |
resolve('Milk') | |
}, 3000) | |
}); | |
const sugar = () => new Promise((resolve, reject) => { | |
setTimeout(() => { | |
resolve('Sugar') | |
}, 3000) | |
}); | |
// BAD: nested promises, waits for one promise to complete before the next one is called | |
// created pyramid code which isn't always clear to read | |
const nestedPromises = () => new Promise((resolve, reject) => { | |
let str = []; | |
flour().then((f) => { | |
str.push(f); | |
milk().then((m) => { | |
str.push(m); | |
sugar().then((s) => { | |
str.push(s); | |
resolve(`From nestedPromises: ${str.join(" ")}`) | |
}) | |
}) | |
}) | |
}) | |
// Uncomment next line to see the output of the above code | |
// nestedPromises().then(all => console.log(`All: ${all}`)); | |
// Not so bad; by returning the a promise as a value to the current promise.then method allows for promise chaining | |
const chainingPromises = () => new Promise((resolve, reject) => { | |
const str= []; | |
flour().then((f) => { | |
str.push(f); | |
return milk(); | |
}) | |
.then((m) => { | |
str.push(m); | |
return sugar(); | |
}) | |
.then((s) => { | |
str.push(s); | |
resolve(`From Chaining: ${str.join(" ")}`) | |
}) | |
}); | |
// Uncomment the next three line below to see the outout of the chainingPromises method | |
// chainingPromises().then((all) => { | |
// console.log(`All: ${all}`) | |
// }); | |
// With promise.all().then(...) | |
const withPromiseAll = () => new Promise((resolve, reject) => { | |
// Promise.all will call all promises and wait for ALL of them to resolve before calling the | |
// resolve method with all promises being fulfilled | |
Promise.all([ | |
flour(), | |
milk(), | |
sugar() | |
]).then(ingredients => resolve(`From withPromiseAll: ${ingredients.join(" ")}`)) | |
}); | |
// All promises have been resolved via the returned Promise.all().then() | |
// Uncomment the next three line below to see the output of Promise.all() | |
// withPromiseAll().then(all => { | |
// console.log(`All: ${all}`) | |
// }) | |
// async/await returns a promise which can be handled with withAsyncAwaitv1 is called | |
const withAsyncAwaitv1 = async () => { | |
const ingredients = await Promise.all([flour(), milk(), sugar()]); | |
// Whatever is returned will be wrapped in a promise | |
return ingredients.join(" "); | |
} | |
// withAsyncAwaitv1().then(all => { | |
// console.log(`Ingredients are: ${all}`) | |
// }) | |
// An enhancement on withAsyncAwaitv1 | |
const withAsyncAwaitv2 = async() => { | |
return await Promise.all([flour(), milk(), sugar()]) | |
} | |
// withAsyncAwaitv2().then(all => console.log(`Done: ${all.join(" ")}`)) | |
const nums = [2, 4, 6, 8]; | |
// to all on each item within the nums array | |
const double = (val) => new Promise((resolve, reject) => { | |
setTimeout(() => resolve(val * 2), 3000) | |
}) | |
// with array.map | |
const withArrayMap = async () => { | |
return await Promise.all( nums.map(num => double(num) )) | |
} | |
withArrayMap().then(all => console.log(`Doubled vals are: ${all.join(",")}`)) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment