JavaScript箭头函数带{}与不带{}的语法及返回值差异咨询

基础语法差异 #

对于const tempFunc = () => { result }和const tempFunc = () => result这两段代码：

• 不带大括号的箭头函数是隐式返回：箭头后面的表达式会直接作为函数的返回值，等价于const tempFunc = () => { return result }。
• 带大括号的箭头函数是显式函数体：此时函数内部需要明确写return语句才会有返回值，如果没写，函数默认返回undefined。所以() => { result }只是在函数体里引用了result变量，但没有返回它，调用后得到的是undefined。

axios请求代码的返回值差异 #

再看你给出的两段axios请求代码：
第一段带大括号的代码：

export const get_post_api = id => {
  axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
}

函数体里只执行了axios.get请求，但没有用return把请求返回的Promise对象抛出去，所以调用get_post_api后得到的是undefined，对应你提供的第一张截图结果。

第二段不带大括号的代码：

export const get_post_api = id =>
  axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)

这里利用箭头函数的隐式返回特性，直接把axios.get返回的Promise对象作为函数返回值，所以调用get_post_api后能拿到这个Promise，后续可以用.then()或await处理请求结果，对应你提供的第二张截图结果。

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