前端axios的封装

axios是一个基于Promise的HTTP客户端，可以用在浏览器和Node.js环境中。在前端开发中，我们常常需要进行网络请求，为了提高代码的复用性和可维护性，我们可以将axios方法封装起来。 以下是一个简单的axios方法封装示例： ```javascript import axios from 'axios' const instance = axios.create({ baseURL: 'http://api.example.com', // API请求的默认前缀 timeout: 10000 // 请求超时时间 }) // 请求拦截器 instance.interceptors.request.use(config => { // 在发送请求之前做些什么 return config }, error => { // 对请求错误做些什么 return Promise.reject(error) }) // 响应拦截器 instance.interceptors.response.use(response => { // 对响应数据做些什么 return response }, error => { // 对响应错误做些什么 return Promise.reject(error) }) export default { // 封装get方法 get(url, params) { return new Promise((resolve, reject) => { instance.get(url, { params: params }).then(response => { resolve(response.data) }).catch(error => { reject(error) }) }) }, // 封装post方法 post(url, data) { return new Promise((resolve, reject) => { instance.post(url, data).then(response => { resolve(response.data) }).catch(error => { reject(error) }) }) } } ``` 在上面的代码中，我们使用axios.create()方法创建了一个axios实例，设置了请求的默认前缀和超时时间，然后定义了请求拦截器和响应拦截器，用来在请求发送前和响应返回后进行一些公共的处理。最后，我们封装了get和post方法，用来发送get和post请求，并返回一个Promise对象。 使用方法如下： ```javascript import http from './http' // 发送get请求 http.get('/user', { id: 1 }).then(data => { console.log(data) }).catch(error => { console.log(error) }) // 发送post请求 http.post('/login', { username: 'admin', password: '123456' }).then(data => { console.log(data) }).catch(error => { console.log(error) }) ``` 这样，我们就可以在项目中方便地调用封装好的axios方法，而且也方便维护和修改。

### 封装 Axios GET 请求的方法 在前端开发中，对 `axios` 库的 GET 请求进行封装是一种常见的做法。通过封装可以提高代码的可维护性和复用性[^1]。以下是几种常用的封装方式： #### 1. 基础封装：统一处理请求参数和错误 将通用逻辑（如默认 URL、错误处理等）集中到一个函数中，以减少重复代码。 ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost/api', // 设置基础URL timeout: 5000, // 超时时间 }); // GET请求封装函数 function get(url, params) { return instance.get(url, { params }) .then(response => response.data) .catch(error => { console.error('GET请求失败:', error); throw error; }); } export default get; ``` 该方法通过创建一个带有基础配置的 `axios` 实例，并定义了一个通用的 `get` 函数用于发送 GET 请求，统一处理响应数据和错误信息[^2]。 #### 2. 高阶封装：结合拦截器增强功能 使用 `axios` 提供的拦截器机制，在请求或响应阶段执行额外操作，例如添加认证头、日志记录等。 ```javascript import axios from 'axios'; import qs from 'qs'; // 用于序列化参数 const instance = axios.create({ baseURL: '/api', timeout: 5000, }); // 请求拦截器 instance.interceptors.request.use(config => { if (config.method === 'get') { config.paramsSerializer = params => { return qs.stringify(params, { arrayFormat: 'repeat' }); // 支持数组参数 }; } return config; }, error => Promise.reject(error)); // 响应拦截器 instance.interceptors.response.use(response => { return response.data; }, error => { console.error('响应错误:', error); return Promise.reject(error); }); // 导出GET请求函数 function get(url, params) { return instance.get(url, { params }); } export default get; ``` 此封装方式利用了 `axios` 的拦截器功能，可以在请求发出前修改配置（如参数格式化），并在响应返回后统一处理结果或错误[^3]。 #### 3. 模块化封装：按业务划分API接口 针对大型项目，建议按照不同的业务模块来组织 API 接口，使代码结构更清晰。 ```javascript // userApi.js import get from './http'; // 引入封装好的GET请求函数 // 获取用户列表 export const getUserList = (params) => { return get('/users', params); }; // 获取单个用户信息 export const getUserById = (id) => { return get(`/user/${id}`); // 支持路径参数 }; ``` 这种方式将不同业务逻辑相关的网络请求分门别类地放在各自的文件中，便于管理和维护[^4]。 #### 4. 统一异常处理与加载状态管理 为提升用户体验，可以在封装过程中加入全局错误提示及加载动画控制等功能。 ```javascript import axios from 'axios'; import { startLoading, endLoading } from './loading'; // 自定义加载状态管理 const instance = axios.create({ baseURL: '/api', timeout: 5000, }); instance.interceptors.request.use(config => { startLoading(); // 开始加载动画 return config; }, error => { endLoading(); // 结束加载动画 return Promise.reject(error); }); instance.interceptors.response.use(response => { endLoading(); // 结束加载动画 return response.data; }, error => { endLoading(); // 结束加载动画 alert('网络异常，请稍后再试！'); // 全局错误提示 return Promise.reject(error); }); function get(url, params) { return instance.get(url, { params }); } export default get; ``` 以上示例展示了如何通过拦截器实现加载状态管理和全局错误提示，从而提供更好的交互体验[^5]。 ---