vue中基于promise封装get/post请求的核心是用axios.create创建统一实例，配置baseurl、timeout等，get自动序列化params为查询字符串，post默认发送json数据，并可挂载到vue原型供组件直接调用。
Vue 中基于 Promise 封装通用的 GET 与 POST 请求方法，核心是用 axios 创建统一实例，再通过 Promise 包裹请求逻辑，让调用端能用 .then() 和 .catch() 处理结果，避免回调嵌套，也便于后续统一加拦截、错误处理或 loading 控制。
创建 axios 实例并配置基础项
在 src/utils/request.js（或其他统一路径）中创建封装文件：
- 用
axios.create()创建独立实例，避免污染全局 axios 配置 - 设置
baseURL统一前缀，如/api，接口路径写相对路径即可 - 设
timeout（如 5000ms），防止请求无限挂起 - 可选配
withCredentials: true（跨域需带 cookie 时启用）
GET 请求封装：参数自动拼入 URL 查询字符串
GET 方法接收 url 和 params 对象，axios 内部会自动将 params 序列化为 query string：
- 不手动拼接
?key=value，直接传对象更安全、易维护 - 返回 Promise，成功时 resolve 响应体
res.data，失败时 reject 错误对象 - 示例：
get('/users', { page: 1, size: 10 })→ 请求/api/users?page=1&size=10
POST 请求封装：默认发送 JSON 格式数据
现代 API 普遍接受 JSON，所以 POST 默认用 application/json：
- 直接传 data 对象，axios 自动序列化并设请求头
- 若后端要求表单格式（
x-www-form-urlencoded），可额外引入qs并在内部判断转换 - 不暴露原始 axios 的 config 结构，调用方只需关注 url 和 payload
- 示例：
post('/login', { username: 'a', password: '123' })
导出方法并挂载到 Vue 原型（可选但实用）
在 main.js 中导入并绑定，使组件内可直接用 this.$http.get()：
- 避免每个组件重复 import，减少耦合
- 命名建议清晰，如
$http或$api，而非模糊的$request - 挂载前可统一注入 token：在请求拦截器中读取 localStorage/sessionStorage 并添加 Authorization 头
不复杂但容易忽略的是：Promise 封装不是单纯套一层 new Promise，而是把 axios 原生 Promise 的链路收口、标准化，让业务层只关心“要什么”和“怎么处理”，不操心“怎么发”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
