axios请求接口返回undefined

问题：后端返回的数据可以在控制台上看到，但是前端接收的是undefined。

原相关代码

//调用方法
const login = async () => {
  await form.value.validate()
  const res = await userLoginService(formModel.value)
  console.log(res)
  userStore.setToken(res.data.token)
  ElMessage.success('登录成功')
  router.push('/')
}
# console.log(res)打印为undefined

//登入接口
export const userLoginService = ({ username, password}) =>{
request.post('/login', { username, password })}

//拦截器--------
// 请求拦截器
request.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    const useStore = useUserStore()
    if (useStore.token) {
      config.headers.Authorization = useStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

// 响应拦截器
request.interceptors.response.use(
  (res) => {
    // TODO 4. 摘取核心响应数据
    if (res.data.code === 1) {
      // console.log(res)
      return res
    }
    // TODO 3. 处理业务失败
    // 处理业务失败, 给错误提示，抛出错误
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    // TODO 5. 处理401错误
    // 错误的特殊情况 => 401 权限不足 或 token 过期 => 拦截到登录
    if (err.response?.status === 401) {
      router.push('/login')
    }
    // 错误的默认情况 => 只要给提示
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

解决：一般来说遇到这种问题，首当其冲的应该去检测拦截器的问题。仔细检查过后，我发现拦截器并没有问题。在层层排查后发现登入接口方法定义错误：

1.于箭头函数格式而言，多加了{},    2.于普通函数而言，缺失了return

以下为详细介绍：

---

在JavaScript（特别是在ES6及以后的版本中）中，箭头函数（arrow function）和普通函数（function declaration/expression）之间有一些重要的区别。在你提供的两个`userLoginService`函数例子中，它们的主要区别在于函数的定义方式以及它们如何绑定`this`。

1. **箭头函数版本**:

```javascript
export const userLoginService = ({ username, password}) =>
  request.post('/login', { username, password });
```

这个版本的`userLoginService`是一个箭头函数，它没有自己的`this`，`arguments`，`super`或`new.target`。箭头函数不会创建自己的`this`上下文，所以`this`值将继承自外围作用域。在这个例子中，由于`userLoginService`是在模块顶层定义的，它可能会捕获全局对象（在浏览器中是`window`对象）的`this`，或者如果是在类或者对象的方法内部定义，则会捕获那个方法内部的`this`。

另外，箭头函数通常更简洁，并且没有函数体的大括号，这有助于编写更干净的代码。在这个例子中，由于`request.post`调用是返回值的直接表达式，箭头函数的简洁性非常适用。

2. **普通函数版本**:

```javascript
export const userLoginService = ({ username, password}) => {
  request.post('/login', { username, password });
}
```

这个版本的`userLoginService`实际上是一个返回`undefined`的函数，因为`request.post`的调用没有被返回。如果你希望这个函数返回`request.post`的结果，你需要使用`return`语句：

```javascript
export const userLoginService = ({ username, password}) => {
  return request.post('/login', { username, password });
}
```

在普通函数中，`this`的值取决于函数是如何被调用的。如果这个函数是一个对象的方法，`this`会指向那个对象。如果它是作为一个独立的函数调用，`this`通常会指向全局对象（在严格模式下，`this`会是`undefined`）。

综上所述，两个版本的`userLoginService`函数的主要区别在于：

- 箭头函数版本更简洁，并且（在这个特定的例子中）直接返回`request.post`的调用结果。
- 普通函数版本（如果没有`return`语句）不返回任何东西，而使用`return`语句的版本会返回`request.post`的调用结果。
- 箭头函数不会创建自己的`this`上下文，而普通函数会根据其调用方式来确定`this`的值。

在实际应用中，根据上下文和需要的行为的不同，会选择使用箭头函数或普通函数。在这个特定的登录服务例子中，使用箭头函数可能更合适，因为它更简洁且直接返回了请求的结果。

---

记录！