如何在多个函数中传递承诺结果？

Question

我发现了很多有关 Promise 的问题和答案，但我无法完全理解如何将它们应用到我的情况中。我正在尝试使用纯 JavaScript 在另一个函数中使用承诺链的结果。

我将如何去做类似下面的事情？

我的预期结果是 生日祝福 祝你生日快乐

相反，我得到 生日祝福 [对象承诺]

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

Answer 1

您的承诺有2个问题

，第一个问题是

resolve(result + "you");

您在Promise解决后不返回最终结果。

第二个问题是

[object Promise]

Promise对象只是等待结果的状态，但是您没有等待任何结果，所以这就是为什么它是印刷[object Promise]

我使用 async/等待 等待您的Promise> 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>

如果您不喜欢async/等待可以调用，然后等待结果

//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>

Answer 2

承诺是代表未来值的对象，而不是值本身。要访问已解决的值，您必须使用其then（）方法，该方法接受可用值时将被调用的回调函数。

由于func1（）返回phrase（）的承诺，因此您的func2（）应该看起来像

//Insert the phrase into the DOM
function func2() {
  func1().then(greeting => {
    document.getElementById("Paragraph").innerHTML = greeting;
  })
}

：您的短语（）函数。最后的然后（）调用resolve（）不存在。这是短语（）重写为简短的：

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