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

Question

我正在使用 promises，这是我的代码：

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

这给了我输出：

resolved from call 1 - resolved from call 2

但是当我改变时：

.then(result => call2(result))

至：

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

结果是undefined。

据我了解：

function(result) {
    call2(result);
}

和：

result => call2(result)

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

Answer 1

它们不一样。这个arrow function:

result => call2(result)

隐式 return 是 call2(result) 的 return 值，因为箭头函数允许使用以下语法：

( … ) => expression

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

() => 1 + 1

等同于：

() => { return 1 + 1 }

并且：

function() {
  return 1 + 1;
}

常规函数不return任何东西：

function(result) {
  call2(result);
}

该回调不会 return 任何显式（它默认为 undefined）。因为您没有 return 任何东西，所以第二个链式 then 接收 undefined 作为 result 参数的值，因此记录 undefined。要达到相同的效果，return 值显式：

return call2(result);

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

Answer 2

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

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

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

result => call2(result)

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

Answer 3

.then(result => call2(result))

隐式 returns call2 的结果，相当于：

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

你要找的是这个：

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

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

Using arrow function in then chaining results in different output

javascript

promise

ecmascript-6

es6-promise

arrow-functions