为什么从函数返回的承诺解析为从 .then 在该函数内部返回的值

Question

我创建了一个返回承诺的函数。

function fetch1 () {
 return new Promise((res, rej) => {
  res("A");
 });
}

我在函数 api1 中调用此函数并返回从 fetch1 返回的承诺。

function api1 () {
 return fetch1().then(v =>{
  console.log("Api1", v);
  return "B"
 );
}

如您所见，我返回的值与从 fetch1 返回的值相同。我没有创造任何新的承诺。但是当我调用它时，我会得到以下输出。

api1().then(v => console.log("Api2 call", v));

Api1 A
Api2 call B

我的预期输出应该是

Api1 A
Api2 call A

从link 可以看出。然后，这个承诺被束缚了。从 first then 返回的 promise 在 next then 中解决。但是从那时起，我没有在 api1 函数中返回任何承诺。

我可以绕过它。但是为什么会发生。

Answer 1

 function fetch1 () {
 return new Promise((res, rej) => {
  res("A");
 });
}

function api1 () {
 return fetch1().then(v =>{
  console.log("Api1", v);
  return "B"
 });
}

api1().then(v => console.log("Api2 call", v));

当调用api1().then(v => console.log("Api2 call", v));时，api1()将等待fetch1中的resolved promise被解析，这意味着api1函数中then中的v将等于'A'，然后@987654327 @函数将'B'返回到下一个，然后是then(v => console.log("Api2 call", v));中的thenv的值将等于'B'。希望你能理解！

Answer 2

如您所见，我返回的值与从 fetch1 返回的值相同

这实际上并不完全正确，您在fetch1 之后调用then。这确实有所作为。

使用同步的非承诺代码几乎相同。如果你在一个方法中返回：

return sum(3,7).multiply(2);

你不只是返回sum(3,7)，因为在它之后你调用multiply(2)。由于调用了multiply，这将返回数字 20。

与 promises 几乎相同，例如：

const myResultPromise = return sumPromise(3,7).then(sumValue => {
  return multiplyPromise(2);
})

这里，myResultPromise 将是 20 的 Promise，因为 then 将新的 Promise 附加到原来的 sumPromise。

Answer 3

当您返回 Promise 时，您实际上并没有返回 Promise 内部的内容，而是 Promise 本身。当你说

function api1 () {
 return fetch1().then(v =>{
  console.log("Api1", v);
  return "B"
 );
}

你说的是“console.log 上一个 Promise 的结果，然后返回一个 new 包含 B 的 Promise。

所以当你打电话时

api1().then(v => console.log("Api2 call", v));

原来的 Promise（包含“A”）已经被消费了，你的新 Promise 包含你之前返回的字符串“B”。

要获得您想要的输出，请像这样重写您的第二部分：

function api1 () {
 return fetch1().then(v =>{
  console.log("Api1", v);
  return v;
 );
}