在 then 链接中使用箭头函数会导致不同的输出

Question

我正在处理承诺，这是我的代码：

function call1() {
   return new Promise(function(resolve, reject) {
     resolve('resolved from call 1');
   });
}

function call2(result) {
    return new Promise(function(resolve, reject) {
    resolve(result + ' - resolved from call 2');
  });
}

function callP() {
  call1()
    .then(result => call2(result))
    .then(function(result) {
      console.log(result);
    });
}
callP();

这给了我输出：

从调用 1 解决 - 从调用 2 解决

但是当我改变时：

.then(result => call2(result)) 

到：

.then(function(result) {
  call2(result);
})

结果是undefined。

据我了解：

function(result) {
    call2(result);
} 

和：

result => call2(result)

意思是一样的。我在这里做错什么了吗？

Answer 1

.then(result => call2(result)) 

隐式返回call2的结果，等价于：

.then(result => { return call2(result); })

你要找的是这个：

.then(function(result) {
    return call2(result);
})

Answer 2

它们不一样。这个arrow function：

result => call2(result)

隐式返回 call2(result) 的返回值，因为箭头函数允许以下语法：

( … ) => expression

其中expression 是箭头函数的返回值。例如：

() => 1 + 1

等同于：

() => { return 1 + 1 }

还有：

function() {
  return 1 + 1;
}

常规函数不返回任何内容：

function(result) {
  call2(result);
}

该回调不会显式返回任何内容（默认为undefined）。因为您不返回任何内容，所以第二个链接的then 接收undefined 作为result 参数的值，因此记录undefined。为了达到同样的效果，显式返回值：

return call2(result);

这会将第一个then 的结果传递给第二个then 并正确记录。另请注意，箭头函数和常规函数绑定 this 的方式不同。箭头函数中的this 是封闭范围的this——它们自己不绑定它，而正则函数表达式取决于它们的调用方式——通常是window 或undefined 在严格模式下。除了语法上的差异，我推荐阅读 Felix Kling's phenomenal answer 的主题。

Answer 3

这里的主要问题是您在第一个函数中忘记了return 一个值。因此，如果在第一个函数中返回 call2(result)，就像我在下面所做的那样：

function(result) {
    return call2(result);
} 

您将获得与使用第二个代码中提到的箭头函数相同的结果：

result => call2(result)

关于第一个函数是否与第二个函数相同（假设您在第一个函数中添加了返回），虽然它们可能实现相同的事情，但它们并不完全相同。主要区别在于this 的上下文。我非常喜欢 MDN 对箭头函数的解释以及它如何影响 this 的值，您可以查看 here。