JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body id="promiseExample">
<h3>
Example for <a href="https://stackoverflow.com/a/43008282/7379876" target="_blank">How do I access previous promise results in a .then() chain?</a>
</h3>
<div>
Result A: <span id="promiseA"></span>
</div>
<div>
Result B: <span id="promiseB"></span>
</div>
<div>
Result C: <span id="promiseC"></span>
</div>
<div>
Final Result: <span id="final"></span>
</div>
</body>
</html>
CSS
#promiseExample div {
margin-bottom: 20px;
}
JavaScript
// setTimeout is used to simulate I/O latency
const DEFAULT_DELAY = 750;
function promiseA(params) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
document.getElementById("promiseA").innerHTML = "params:" + JSON.stringify(params);
resolve("A");
}, DEFAULT_DELAY);
});
}
function promiseB(params) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
document.getElementById("promiseB").innerHTML = "params:" + JSON.stringify(params);
resolve("B");
}, DEFAULT_DELAY);
});
}
function promiseC(params) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
document.getElementById("promiseC").innerHTML = "params:" + JSON.stringify(params);
resolve("C");
}, DEFAULT_DELAY);
});
}
function getExample() {
// locally scoped
const results = {};
return promiseA("None").then(function(resultA) {
// add value to results object
results.a = resultA;
// pass result of this promise to next promise
return promiseB(resultA);
}).then(function(resultB) {
results.b = resultB;
return promiseC(resultB);
}).then(function(resultC) {
results.c = resultC;
// results object now contains all values from promise chain
return Promise.resolve(results);
}).catch(function(error) {
return Promise.reject(error);
});
}
document.addEventListener("DOMContentLoaded", function(event) {
getExample().then(function(result) {
document.getElementById("final").innerHTML = "I have access to all results from chain:" + JSON.stringify(result);
}).catch(function(error) {
console.log("Failed:", error);
});
});