理解Post请求和Get请求区别&&请求头请求体简单回顾

<think>我们已经在之前的对话中详细讨论了如何封装axios的POST请求，现在用户进一步询问关于GET请求的封装和参数设置，以及两种请求方法的对比示例。根据用户要求，我们需要在Vue3中封装axios的GET和POST请求，并分别说明参数设置方法。回顾之前的封装：1.我们已经创建了一个axios实例（service）并设置了基础配置（baseURL、timeout等）和拦截器。2.针对POST请求，我们展示了如何传递data参数，以及如何处理不同内容类型（如JSON和表单数据）。现在我们需要补充GET请求的封装方式，并对比说明两种请求的参数设置差异。关键点：-GET请求的参数应放在`params`属性中，而POST请求的参数放在`data`属性中。-在封装函数时，我们需要根据请求方法（method）来决定参数的传递位置。我们将按照以下结构组织回答：1.封装axios实例（与之前相同，但为了完整性会简要提及）2.封装统一的请求函数（可同时处理GET和POST）或分别封装（更推荐分别封装，因为更清晰）3.提供GET和POST请求的调用示例注意：根据用户提供的引用，有两种封装方式：引用[1]：将axios封装到一个函数中，通过传入配置对象来使用。引用[2]：分别封装GET和POST方法，通过switch来调用。我们更推荐分别封装，因为这样在调用时更加明确，并且可以针对不同方法进行特殊处理。以下我们将展示：步骤1：创建axios实例（utils/request.js）步骤2：分别封装get和post方法（api/xxx.js）步骤3：在组件中使用另外，我们将对比说明参数设置：GET请求：参数放在URL的查询字符串中，因此使用`params`属性POST请求：参数放在请求体中，因此使用`data`属性同时，我们将考虑TypeScript类型增强（虽然不是用户直接要求的，但为了完整性可以提及，用户未要求可以不写代码）由于用户要求的是Vue3，我们将使用组合式API的示例。下面开始组织回答：</think> 在 Vue3 中正确封装 Axios 的 GET 和 POST 请求需要清晰的参数设置逻辑。以下是符合实际项目需求的完整封装方案： ### 一、基础 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 地址