写一份封装axios请求的代码

可以，以下是一份封装axios的代码： import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 500, headers: { 'Content-Type': 'application/json' } }); instance.interceptors.request.use( config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); } ); instance.interceptors.response.use( response => { // 对响应数据做点什么 return response.data; }, error => { // 对响应错误做点什么 return Promise.reject(error); } ); export default instance;

<think>我们正在处理一个关于Axios请求参数格式设置为表单格式的问题。用户希望了解如何配置Axios以发送表单格式的数据（即`application/x-www-form-urlencoded`），而不是默认的JSON格式（Request Payload）。 根据引用内容，我们可以总结出几种方法： 1. 使用`params`和`paramsSerializer`来处理GET请求中的数组参数（引用[1]和[3]），但这不是用户要的表单格式（form data）的POST请求。 2. 对于POST请求，用户希望发送的是表单数据（form data），而不是JSON（Request Payload）。引用[2]展示了一个发送JSON数据的POST请求示例，这不是用户想要的。 3. 引用[4]提供了两种方法： - 方法一：使用`transformRequest`配置项，将请求数据转换为URL编码的字符串。同时，可以设置请求头为`application/x-www-form-urlencoded`。但是，这种方法会影响到所有使用该实例的请求（包括PUT、PATCH等），除非你只在一个特定的请求中使用。 - 方法二（在引用[4]中没有完整给出，但提到了设置headers）是设置请求头，并配合使用`qs`库将数据转换为URL编码的字符串。 4. 引用[5]提到，对于POST请求，有两种常见的数据传递方式：requestBody（即JSON）和formData。并指出他们封装了两份POST请求，但没有给出具体代码。 因此，我们主要关注如何将POST请求的数据格式设置为表单格式。 ### 解决方案 #### 方法1：使用URLSearchParams 在现代浏览器中，可以使用`URLSearchParams`来构建表单数据。 ```javascript const params = new URLSearchParams(); params.append('key1', 'value1'); params.append('key2', 'value2'); axios.post('/your/url', params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); ``` #### 方法2：使用qs库 如果你需要支持旧浏览器或者有更复杂的数据结构（如嵌套对象、数组等），可以使用`qs`库（需要安装：`npm install qs`）。 ```javascript import qs from 'qs'; const data = { key1: 'value1', key2: 'value2' }; axios.post('/your/url', qs.stringify(data), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); ``` #### 方法3：全局配置transformRequest（谨慎使用） 如果你希望所有请求都自动转换为表单格式（但通常不推荐，因为会影响所有请求，包括PUT、PATCH等），可以在创建axios实例时配置`transformRequest`。 ```javascript import axios from 'axios'; import qs from 'qs'; const instance = axios.create({ transformRequest: [function (data) { return qs.stringify(data); }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); // 然后使用这个实例发送请求 instance.post('/your/url', { key1: 'value1', key2: 'value2' }); ``` 注意：这种方法会改变所有使用该实例的请求的数据格式。如果某些请求需要发送JSON数据，则不能使用这个实例。 ### 总结 推荐使用方法1或方法2，因为它们更灵活，可以针对单个请求进行配置。方法1适用于简单的数据，方法2适用于复杂数据。 ### 相关问题 1. 如何在使用Axios发送表单数据时处理数组参数？ 2. Axios中如何同时发送表单数据和文件（multipart/form-data）？ 3. 在Axios中，如何根据不同的请求类型（POST、PUT等）动态设置请求头？</think>### Axios 请求参数格式设置为表单格式（Form Data）的解决方案 在 Axios 中设置请求参数为表单格式（`application/x-www-form-urlencoded`）而非 JSON 格式（Request Payload），可通过以下方法实现： --- #### 方法 1：使用 `URLSearchParams`（推荐） 直接通过浏览器原生 API 构建表单数据： ```javascript import axios from 'axios'; const params = new URLSearchParams(); params.append('username', 'admin'); params.append('password', '123456'); axios.post('/login', params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); ``` --- #### 方法 2：使用 `qs` 库处理复杂数据 处理嵌套对象/数组等复杂数据结构： 1. 安装依赖： ```bash npm install qs ``` 2. 代码实现： ```javascript import axios from 'axios'; import qs from 'qs'; const data = { user: { name: 'John', roles: ['admin', 'editor'] } }; axios.post('/api', qs.stringify(data, { indices: false }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); ``` - `indices: false` 选项将数组转换为 `roles=admin&roles=editor` 格式[^3] --- #### 方法 3：全局配置 `transformRequest` 修改 Axios 实例默认行为（影响所有请求）： ```javascript const api = axios.create({ transformRequest: [(data) => qs.stringify(data)], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); // 使用实例 api.post('/submit', { key1: 'value1', key2: 'value2' }); ``` > ⚠️ 注意：此方法会影响所有 PUT/PATCH 请求[^4] --- #### 关键区别说明 | **场景** | **参数位置** | **Content-Type** | |----------------|---------------|-------------------------------| | 表单格式 | `data` 字段 | `application/x-www-form-urlencoded` | | JSON格式 | `data` 字段 | `application/json` (默认) | | URL查询参数 | `params` 字段 | 自动附加到 URL | > 正确示例：表单提交必须同时满足： > 1. 数据通过 `qs.stringify()` 或 `URLSearchParams` 处理 > 2. 设置 `Content-Type` 请求头[^1][^4] --- ### 常见问题解决 **Q：为什么后端收不到数组参数？** A：需配置 `paramsSerializer` 并设置 `indices` 选项： ```javascript axios.get('/api', { params: { ids: [1, 2, 3] }, paramsSerializer: params => qs.stringify(params, { indices: false }) }); // 生成 ?ids=1&ids=2&ids=3 ``` **Q：文件上传如何混合表单数据？** A：使用 `FormData` 对象： ```javascript const formData = new FormData(); formData.append('avatar', file); // 文件 formData.append('info', JSON.stringify(userInfo)); // 其他数据 axios.post('/upload', formData); // 自动识别 multipart/form-data ``` --- ### 相关问题 1. 如何在使用 Axios 发送表单数据时处理嵌套对象？ 2. Axios 中 `params` 和 `data` 字段有何本质区别？ 3. 如何为 Axios 配置全局请求拦截器统一处理参数格式？ 4. 文件上传（multipart/form-data）与表单格式有何不同实现？ 5. 如何避免 `transformRequest` 影响 PUT/PATCH 请求？ [^1]: axios 中 post 参数问题 —— formData 和 Request payload [^3]: axios get 携带数组请求 / post form-data 请求 [^4]: axios 把 post 的 RequestPayload 格式转为 formdata