Axios 封装请求

<think>好的，用户想了解如何封装Axios的GET和POST请求，需要给出示例教程。首先，我需要回忆一下Axios的基本用法以及封装的常见方法。 根据提供的引用资料，特别是引用[2]、[3]、[4]、[5]，Axios的封装通常包括创建实例、设置基础URL、配置拦截器等步骤。用户可能需要一个结构清晰的封装示例，包括GET和POST的不同处理方式。 首先，Axios的GET请求参数是通过params传递，而POST则是通过data传递请求体。引用[1]中提到POST请求的参数放在data字段，而GET的参数可能附加在URL上。此外，不同的Content-Type设置会影响POST请求的数据格式，比如application/json和x-www-form-urlencoded的区别，引用[4]提到后者需要将数据转换为键值对形式。 接下来，需要展示如何创建一个Axios实例，设置基础URL，这在引用[5]中有示例。然后，添加请求拦截器和响应拦截器，处理公共参数、错误信息等，引用[2]和[3]提到了拦截器的重要性。 用户可能需要具体的代码示例，比如如何封装GET和POST方法，如何处理不同的Content-Type，以及如何统一管理API请求。同时，需要解释每个步骤的作用，比如baseURL的好处，拦截器如何统一处理loading状态或错误提示。 需要注意的是，在POST请求中，根据后端要求，可能需要转换数据格式。例如，使用qs库来处理x-www-form-urlencoded格式，这在引用[4]中有提到。此外，错误处理也是关键部分，应该在拦截器中捕获异常，并给出友好提示。 最后，生成相关问题，考虑用户可能进一步想了解的内容，如拦截器的更多应用、不同Content-Type的区别，或者如何结合Vue使用封装后的Axios。</think>### Axios请求封装教程 #### 一、基础封装步骤 1. **创建Axios实例** ```javascript // api/request.js import axios from 'axios' import qs from 'qs' const service = axios.create({ baseURL: 'http://api.example.com', // 统一接口前缀[^5] timeout: 10000 // 超时时间 }) ``` 2. **请求拦截器** 处理公共请求头、Token、参数格式： ```javascript service.interceptors.request.use(config => { config.headers['Authorization'] = 'Bearer token' // 添加认证头[^2] // POST请求特殊处理 if (config.method === 'post') { config.headers['Content-Type'] = 'application/x-www-form-urlencoded'[^4] config.data = qs.stringify(config.data) // 转换表单数据 } return config }) ``` #### 二、GET/POST方法封装 1. **GET请求封装** ```javascript export function get(url, params) { return new Promise((resolve, reject) => { service.get(url, { params }) .then(res => resolve(res.data)) .catch(err => { console.error('GET请求失败:', err) reject(err) }) }) } ``` 2. **POST请求封装** ```javascript export function post(url, data) { return new Promise((resolve, reject) => { service.post(url, data) .then(res => resolve(res.data)) .catch(err => { console.error('POST请求失败:', err) reject(err) }) }) } ``` #### 三、响应拦截处理 ```javascript service.interceptors.response.use( response => { if (response.status === 200) { return Promise.resolve(response.data) } else { return Promise.reject(response) } }, error => { console.error('接口异常:', error) return Promise.reject(error.response) } ) ``` #### 四、实际调用示例 ```javascript // 用户登录接口 export const login = (username, password) => { return post('/user/login', { username, password }) } // 获取用户信息 export const getUserInfo = (userId) => { return get('/user/info', { id: userId }) } ``` #### 五、特殊场景处理 **JSON格式POST请求：** ```javascript const jsonPost = (url, data) => { return service({ method: 'post', url, headers: { 'Content-Type': 'application/json' },[^1] data: JSON.stringify(data) }) } ```