CODEWITHSUNDEEP
javascriptpromise
Kimber Warden
Kimber Warden

Reputation: 193

How do I pass promise results around multiple functions?

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();

Upvotes: 1

Views: 2174

Answers (2)

Nick Vu
Nick Vu

Reputation: 15520

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>

Upvotes: 3

Joseph
Joseph

Reputation: 119827

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")
}

Upvotes: 2

Related Questions