如何围绕多个函数传递承诺结果？

Question

我发现了很多关于 promises 的问题和答案，但我不太清楚如何将它们应用到我的情况中。我正在尝试使用纯 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

承诺是代表未来价值的对象，而不是价值本身。要访问已解析的值，您必须使用其 then() 方法，该方法接受一个回调函数，该函数将在值可用时调用。

因为 func1() returns phrase() 的承诺，你的 func2() 应该是这样的：

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

您的 phrase() 函数似乎也有错误。最后一个 then() 调用了不存在的 resolve()。这里 phrase() 为简洁重写：

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

Answer 2

你的 Promise 有 2 个问题

第一个问题是

resolve(result + "you");

在Promise 解决

后，您没有return 最终结果

第二个问题是

[object Promise]

Promise对象只是等待结果的状态，而你没有等待任何结果，所以才会打印[object Promise]

我使用 async/await 等待你的 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/await可以打电话then等待结果

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

如何围绕多个函数传递承诺结果？

How do I pass promise results around multiple functions?

javascript

promise