为什么在处理 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 函数周围用花括号引起这种行为的原因是什么？不能使用花括号吗？为什么？虽然承诺有点令人困惑。

Answer 1

当你在箭头函数中使用{}时，你必须return一些东西，让我们来看看。

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

阅读此 MDN 文档。

Answer 2

这个：

() => 5

等于

() => { return 5; }

如果使用大括号，需要显式return.

Answer 3

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

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

这可以缩短为：

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

可以进一步缩短为：

var foo = () => 'bar';

在你的情况下，你可以把你发布的代码想象成这样：

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

上面的函数没有return任何东西，这就是你问题的根源。你真正想要的是：

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

可以缩短为：

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

换句话说，如果存在大括号，您必须明确 return 该函数的值。

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

Why Curly braces while handling a Promise object provides undefined data?

reactjs

es6-promise

fetch-api

curly-braces