I've found lots of questions and answers about promises, but I can't quite wrap my head around how to apply them to my situation. I'm trying to use the result of a promise chain in another function using plain Javascript.
How would I go about doing something like the below?
My expected results is Birthday Greeting Happy birthday to you
Instead, I get Birthday Greeting [object Promise]
HTML
<div id="Heading">Birthday</div>
<p>
<div id="Paragraph"></div>
JS
//Create the phrase
function phrase() {
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Happy ");
}, 3 * 100);
});
var q =
(p.then((result) => {
return result + "birthday "
}).then((result) => {
return result + "to ";
}).then((result) => {
resolve( result + "you");
})
)
return q;
}
//Add to the heading and return the phrase for use by another function
function func1() {
document.getElementById("Heading").innerHTML += "Greeting";
return phrase();
}
//Insert the phrase into the DOM
function func2() {
document.getElementById("Paragraph").innerHTML = func1();
}
//Invoke the whole bit
func2();
You have 2 problems with your Promise
The first problem is
resolve(result + "you");
You don't return your final result after Promise resolved
The second problem is
[object Promise]
Promise object is just the state of waiting for results, but you didn't wait for any results, so that's why it's printed [object Promise]
I use async/await for awaiting the final result from your Promise
//Create the phrase
async function phrase() {
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Happy ");
}, 3 * 100);
});
//wait for final result with `async/await`
var q =
await (p.then((result) => {
return result + "birthday "
}).then((result) => {
return result + "to ";
}).then((result) => {
//need to return final result after Promise resolved
return result + "you";
}))
return q;
}
//Add to the heading and return the phrase for use by another function
async function func1() {
document.getElementById("Heading").innerHTML += "Greeting";
//wait for final result with `async/await`
return await phrase();
}
//Insert the phrase into the DOM
async function func2() {
//wait for final result with `async/await`
document.getElementById("Paragraph").innerHTML = await func1();
}
//Invoke the whole bit
func2();<div id="Heading">Birthday</div>
<div id="Paragraph"></div>If you don't like async/await you can call then for awaiting results
//Create the phrase
function phrase() {
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Happy ");
}, 3 * 100);
});
var q =
(p.then((result) => {
return result + "birthday "
}).then((result) => {
return result + "to ";
}).then((result) => {
return result + "you";
}))
return q;
}
//Add to the heading and return the phrase for use by another function
async function func1() {
document.getElementById("Heading").innerHTML += "Greeting";
return phrase();
}
//Insert the phrase into the DOM
async function func2() {
func1().then(result => document.getElementById("Paragraph").innerHTML = result);
}
//Invoke the whole bit
func2();<div id="Heading">Birthday</div>
<div id="Paragraph"></div>A promise is an object that represents a future value, not the value itself. To access the resolved value, you must use its then() method which accepts a callback function that will be invoked when the value available.
Since func1() returns phrase()'s promise, your func2() should look like this:
//Insert the phrase into the DOM
function func2() {
func1().then(greeting => {
document.getElementById("Paragraph").innerHTML = greeting;
})
}
There also seems to be an error in your phrase() function. The last then() calls resolve() which doesn't exist. Here's phrase() rewritten for brevity:
function phrase() {
let p = new Promise((resolve, reject) => {
setTimeout(() => { resolve("Happy ")}, 3 * 100)
})
return p.then(result => result + "birthday ")
.then(result => result + "to ")
.then(result => result + "you")
}