为什么处理 Promise 对象时大括号会提供未定义的数据？

Question

在从 API 获取响应的简单 React 应用程序中，以下带有大括号的代码的结果数据值为undefined。

fetch('http://localhost:8000/track/?id='+this.state.input)
            .then(res => {res.json()})        //Note Curly braces around {res.json()}
            .then((data) => {
                console.log(data);  

然而，当花括号被删除时，令人惊讶的是它在控制台中获取并打印了响应数据。

fetch('http://localhost:8000/track/?id='+this.state.input)
            .then(res => res.json())         //No Curly braces - then works fine
            .then((data) => {
                console.log(data);

Promise 函数周围有大括号的这种行为的原因是什么？是不是不能使用大括号？为什么？不过 Promise 有点令人困惑。

Answer 1

当您使用箭头函数时，对于非常简单的函数，您可以省略花括号。这将隐式返回箭头后面表达式的结果。通过示例可以最好地解释这一点。让我们从一个简单的函数开始：

var foo = () => {
  return 'bar';
}

这可以简化为这一行：

var foo = () => { return 'bar' }

可以进一步缩短为（删除花括号和return语句）：

var foo = () => 'bar';

对于您的情况，您可以将您发布的代码视为如下：

.then(res => {
  res.json()
})

上面的函数不返回任何内容，这是问题的根源。你真正想要的是这样的：

.then(res => {
  return res.json()
})

可以这样缩短：

.then(res => { return res.json() }) // one-liner with curlys
.then(res => res.json())            // without curlys