Last active
October 23, 2017 16:39
-
-
Save arturparkhisenko/45999905217b01eea4c98746f7e62883 to your computer and use it in GitHub Desktop.
js promises
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
// finally -------------------------------------------- | |
const fetchAndDisplay = async ({url, element}) => { | |
showLoadingSpinner(); | |
try { | |
const response = await fetch(url); | |
const text = await response.text(); | |
element.textContent = text; | |
} catch (error) { | |
element.textContent = error.message; | |
} finally { | |
hideLoadingScreen(); | |
} | |
}; | |
// chaining ------------------------------------------- | |
// short and easy | |
let arrOfIndexesOrFuncs = [1, 2, 3, 4, 5]; | |
arrOfIndexesOrFuncs.reduce((promise, value) => { | |
return promise.then(() => fetch(value)); | |
}, Promise.resolve()); | |
// https://developers.google.com/web/fundamentals/primers/promises | |
// Start off with a promise that always resolves | |
var sequence = Promise.resolve(); | |
// chaining | |
getJSON('story.json').then(function(story) { | |
addHtmlToPage(story.heading); | |
return story.chapterUrls.reduce(function(sequence, chapterUrl) { | |
// Once the last chapter's promise is done… | |
return sequence.then(function() { | |
// …fetch the next chapter | |
return getJSON(chapterUrl); | |
}).then(function(chapter) { | |
// and add it to the page | |
addHtmlToPage(chapter.html); | |
}); | |
}, Promise.resolve()); | |
}).then(function() { | |
// And we're all done! | |
addTextToPage("All done"); | |
}).catch(function(err) { | |
// Catch any error that happened along the way | |
addTextToPage("Argh, broken: " + err.message); | |
}).then(function() { | |
// Always hide the spinner | |
document.querySelector('.spinner').style.display = 'none'; | |
}) | |
// parallel but in order | |
getJSON('story.json').then(function(story) { | |
addHtmlToPage(story.heading); | |
// Map our array of chapter urls to | |
// an array of chapter json promises. | |
// This makes sure they all download in parallel. | |
return story.chapterUrls.map(getJSON) | |
.reduce(function(sequence, chapterPromise) { | |
// Use reduce to chain the promises together, | |
// adding content to the page for each chapter | |
return sequence.then(function() { | |
// Wait for everything in the sequence so far, | |
// then wait for this chapter to arrive. | |
return chapterPromise; | |
}).then(function(chapter) { | |
addHtmlToPage(chapter.html); | |
}); | |
}, Promise.resolve()); | |
}).then(function() { | |
addTextToPage("All done"); | |
}).catch(function(err) { | |
// catch any error that happened along the way | |
addTextToPage("Argh, broken: " + err.message); | |
}).then(function() { | |
document.querySelector('.spinner').style.display = 'none'; | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment