vue封装接口的时候,写的post请求,却发get

在项目维护中,作者遇到将axios请求封装后,POST请求被误发送为GET的问题。通过排查发现,可能与之前编写的请求冲突。文章强调了请求管理的重要性,建议要么将请求分离到单独文件,便于管理,要么统一使用原型挂载,尤其在小项目中。作者总结经验,提醒开发者避免使用两种方式混合发送请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

维护项目的时候,写了个添加商品的功能,之前是把axios挂载到vue原型上,以this.$http.的方式去调用,这种方式不便于接口的管理,于是我对接口请求进行封装

export const addGoodsApi = (aaa) => {
  return request({
    type: 'POST',
    url: '/goods',
    data: aaa
  })
}

这里写的POST请求,等实际发送的时候却变成了get

导入进行调用

 

 然后离奇的一幕发生了 

 写的post请求,发送的时候却变成了get

搞了半天,我换成了之前的方式调用,就恢复正常了,

this.$http.post('/goods', temp)

我想可能是和之前写的请求冲突了,我查看了下,之前写的请求路径url一样,只是请求方式不一样

总结了下,项目中最好不要用两种方式去发请求,要么分离出来成单独的文件,这也是我推荐的一种方法,便于管理;要么就是挂载到原型上,这种方式只适用于小的项目练手 

 

<think>我们已经在之前的对话中详细讨论了如何封装axios的POST请求,现在用户进一步询问关于GET请求封装和参数设置,以及两种请求方法的对比示例。根据用户要求,我们需要在Vue3中封装axios的GETPOST请求,并分别说明参数设置方法。回顾之前的封装:1.我们已经创建了一个axios实例(service)并设置了基础配置(baseURL、timeout等)和拦截器。2.针对POST请求,我们展示了如何传递data参数,以及如何处理不同内容类型(如JSON和表单数据)。现在我们需要补充GET请求封装方式,并对比说明两种请求的参数设置差异。关键点:-GET请求的参数应放在`params`属性中,而POST请求的参数放在`data`属性中。-在封装函数时,我们需要根据请求方法(method)来决定参数的传递位置。我们将按照以下结构组织回答:1.封装axios实例(与之前相同,但为了完整性会简要提及)2.封装统一的请求函数(可同时处理GETPOST)或分别封装(更推荐分别封装,因为更清晰)3.提供GETPOST请求的调用示例注意:根据用户提供的引用,有两种封装方式:引用[1]:将axios封装到一个函数中,通过传入配置对象来使用。引用[2]:分别封装GETPOST方法,通过switch来调用。我们更推荐分别封装,因为这样在调用时更加明确,并且可以针对不同方法进行特殊处理。以下我们将展示:步骤1:创建axios实例(utils/request.js)步骤2:分别封装getpost方法(api/xxx.js)步骤3:在组件中使用另外,我们将对比说明参数设置:GET请求:参数放在URL的查询字符串中,因此使用`params`属性POST请求:参数放在请求体中,因此使用`data`属性同时,我们将考虑TypeScript类型增强(虽然不是用户直接要求的,但为了完整性可以提及,用户未要求可以不代码)由于用户要求的是Vue3,我们将使用组合式API的示例。下面开始组织回答:</think> 在 Vue3 中正确封装 Axios 的 GETPOST 请求需要清晰的参数设置逻辑。以下是符合实际项目需求的完整封装方案: ### 一、基础 Axios 封装 (`utils/request.js`) ```javascript import axios from 'axios' // 创建 Axios 实例 const service = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) // 请求拦截器(添加认证 token) service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) config.headers.Authorization = `Bearer ${token}` return config }) // 响应拦截器(统一错误处理) service.interceptors.response.use( response => response.data, error => { if (error.response?.status === 401) { console.error('身份验证失败') // 重定向到登录页 } return Promise.reject(error) } ) // 封装统一请求方法 export const request = config => service(config) ``` ### 二、GET/POST 方法封装 (`api/user.js`) ```javascript import { request } from '@/utils/request' /** * GET 请求封装 * @param {string} url - API 地址 * @param {object} params - 查询参数 * @param {object} config - 额外配置 */ export const getRequest = (url, params, config = {}) => { return request({ url, method: 'get', params, // GET 参数放这里 ...config }) } /** * POST 请求封装 * @param {string} url - API 地址 * @param {object} data - 请求体数据 * @param {object} config - 额外配置 */ export const postRequest = (url, data, config = {}) => { return request({ url, method: 'post', data, // POST 参数放这里 ...config }) } // 特定 API 端点封装 export const login = credentials => postRequest('/user/login', credentials) export const getUserProfile = id => getRequest(`/user/${id}`) ``` ### 三、组件中使用示例 (`UserComponent.vue`) ```javascript import { login, getUserProfile } from '@/api/user' // GET 请求示例 const fetchUserData = async () => { try { // 参数位置:url路径参数 + 查询参数 const res = await getUserProfile(123, { params: { fields: 'name,email' }, // ✅ 正确位置 headers: { 'X-Request-From': 'WebApp' } }) console.log('用户数据:', res) } catch (err) { console.error('获取失败', err) } } // POST 请求示例 const handleLogin = async () => { try { const res = await login({ username: 'admin', password: 'secret' }) console.log('登录成功', res) } catch (err) { console.error('登录失败', err) } } ``` ### 参数设置对比表 | 请求类型 | 位置参数 | URL 路径参数 | 查询参数 | 请求体参数 | |----------|----------------|--------------|----------------|------------| | **GET** | `config.params` | URL 中 | `config.params` | 不允许 | | **POST** | `config.data` | URL 中 | `config.params` | `config.data` | ### 关键实践说明 1. **GET 参数位置** ```javascript // ✅ 正确方式 (参数放在params) getRequest('/api/data', { page: 1, size: 10 }) // ❌ 错误方式 (放data无效) getRequest('/api/data', { data: {...} }) ``` 2. **POST 参数类型** ```javascript // JSON格式 (默认) postRequest('/api/user', { name: 'John' }) // FormData格式 const formData = new FormData() formData.append('file', file) postRequest('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) ``` 3. **混合参数场景** ```javascript // POST请求同时带路径参数+查询参数+请求postRequest( `/orders/${orderId}/items`, // 路径参数 { quantity: 2 }, // 请求体 { params: { discount: true } // 查询参数 } ) ``` ### 最佳实践建议 1. **分层封装结构**:基础层(Axios实例)→ 业务层(API模块)→ 组件层 2. **参数位置规范**:保持 GET 用 `params`,POST 用 `data` 的约定 3. **TypeScript 增强**:添加接口定义确保参数类型安全 4. **全局配置管理**:通过 `.env` 文件管理不同环境 API 地址
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值