今天学到了什么#

• axios的post方法
• 统一管理项目用户相关的 HTTP 接口

正确用法#

1
reqLogin({ username: 'admin', password: '111111' }).then((res) => {
2
  console.log(res)
3
})

1
const res = await reqLogin({ username: 'admin', password: '111111' })
2
console.log(res)

“变量接收返回值 Promise，然后再用变量.then”是对的#

例如：

1
const p = reqLogin(data)
2
p.then((res) => {
3
  console.log(res)
4
})

这和下面这句是等价的：

1
reqLogin(data).then((res) => {
2
  console.log(res)
3
})

重点理解#

reqLogin 这个函数本身并不是“直接返回最终数据”，而是：

• 发起请求
• 返回 Promise
• 当请求成功时，Promise 解析值才是后台返回的数据

所以调用它之后，必须“继续处理 Promise”。

一句总结#

对，reqLogin() 返回的是 Promise；你要用变量接收它，再用 .then() 或 await 去拿最终结果。

目的#

“统一管理用户相关接口”就是把和用户模块有关的请求都集中放在一个文件里，方便维护和复用。

比如在 src/api/user/index.ts 里，集中管理了：

• 登录接口
• 获取用户信息接口
• 退出登录接口

这样做的好处有几个：

1) 便于管理#

所有用户模块的请求都在一个地方，后面修改接口地址、参数、返回格式时，不需要到各个页面里找。

2) 便于复用#

页面组件只需要调用：

1
reqLogin(data)
2
reqUserInfo()
3
reqLogout()

不用重复写 axios.post(...) 这种代码。

3) 结构更清晰#

比如登录页、个人中心、菜单权限等页面，都直接用统一的接口方法，不会散落在各个组件里，代码更容易维护。

4) 方便统一处理#

比如你后面想统一加：

• 请求头
• 统一错误处理
• 统一 token
• 统一 baseURL

都可以在请求封装层处理，不需要每个页面单独写。

例子#

如果没有统一管理，页面里可能会写：

1
axios.post('/user/login', data)
2
axios.get('/user/info')
3
axios.post('/user/logout')

分散在很多页面。

统一后，就变成：

1
reqLogin(data)
2
reqUserInfo()
3
reqLogout()

更清晰，也更容易维护。

说白了#

这一个文件的作用就是：

“把用户相关的所有 HTTP 请求封装成方法，给其他页面统一调用”。