为什么处理Promise对象时加花括号会得到undefined数据？

这个现象和Promise本身的逻辑无关，完全是ES6箭头函数的返回值规则导致的：

• 箭头函数不带花括号包裹函数体时，属于「隐式返回」，会自动把函数体表达式的执行结果作为返回值
• 箭头函数带花括号包裹函数体时，属于「显式函数体」，必须手动写return关键字指定返回值，否则函数默认返回undefined

两种写法的差异拆解 #

第一种写法回调返回值是undefined，所以下一个链式调用拿到的data自然为空：

fetch('http://localhost:8000/track/?id='+this.state.input)
  .then(res => {res.json()}) // 加了花括号无return，默认返回undefined
  .then((data) => {
    console.log(data); 
  })

第二种无花括号的写法是隐式返回res.json()的结果，链式调用可以正常接收到解析后的响应数据：

fetch('http://localhost:8000/track/?id='+this.state.input)
  .then(res => res.json()) // 隐式返回res.json()生成的Promise对象
  .then((data) => {
    console.log(data);
  })

可以使用花括号吗？ #

完全可以，只要补全return关键字即可，和无花括号写法效果完全一致：

.then(res => {
  // 这里可以写多行逻辑，比如打印响应状态、参数校验等
  console.log('响应状态码：', res.status)
  return res.json()
})

当你的回调逻辑超过一行时，就必须用花括号+显式return的写法。

内容的提问来源于stack exchange，提问作者Blossom