文章目录
- 一、axios简介
- 基本使用
- 二、封装axios的原因
- 三、封装axios的方法
- 1. 设置接口请求前缀
- 2. 设置请求头和超时时间
- 3. 封装请求方法
- 4. 添加请求拦截器
- 5. 添加响应拦截器
- 小结
一、axios简介
axios 是一个基于 XMLHttpRequest 的轻量级HTTP客户端，适用于浏览器和Node.js环境。它提供以下特性：
- 创建XMLHttpRequests和HTTP请求
- 支持 Promise API
- 请求和响应拦截
- 数据转换
- 取消请求
- 自动转换JSON数据
- 客户端XSRF防御
Vue 2.0起，官方推荐使用axios替代vue-resource。
基本使用
安装 axios：
npm install axios --S
或通过CDN引入：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
在项目中导入并使用：
import axios from 'axios';
axios({url: 'xxx',method: 'GET',params: {type: '',page: 1}
}).then(res => {console.log(res);
});
并发请求：
axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (res1, res2) {// 处理响应}));
二、封装axios的原因
虽然 axios 的API设计友好，但随着项目规模增长，直接使用 axios 可能会导致以下问题：
- 重复编写配置代码，如超时时间、请求头等。
- 难以维护的冗余代码。
- 缺乏统一的错误处理。
因此，封装axios可以提高代码质量和可维护性。
三、封装axios的方法
1. 设置接口请求前缀
根据不同环境（开发、测试、生产）设置不同的请求前缀：
if (process.env.NODE_ENV === 'development') {axios.defaults.baseURL = 'http://dev.xxx.com';
} else if (process.env.NODE_ENV === 'production') {axios.defaults.baseURL = 'http://prod.xxx.com';
}
在 vue.config.js 中配置代理转发以实现跨域：
devServer: {proxy: {'/proxyApi': {target: 'http://dev.xxx.com',changeOrigin: true,pathRewrite: {'^/proxyApi': ''}}}
}
2. 设置请求头和超时时间
创建 axios 实例时，配置通用请求头和超时时间：
const service = axios.create({timeout: 30000,headers: {'Content-Type': 'application/json;charset=utf-8'}
});
3. 封装请求方法
封装 GET 和 POST 请求方法，便于统一管理和使用：
export function httpGet({ url, params = {} }) {return new Promise((resolve, reject) => {axios.get(url, { params }).then(res => resolve(res.data)).catch(err => reject(err));});
}
export function httpPost({ url, data = {}, params = {} }) {return new Promise((resolve, reject) => {axios({ url, method: 'post', data, params }).then(res => resolve(res.data)).catch(err => reject(err));});
}
将封装的方法放在 api.js 文件中，便于统一管理：
import { httpGet, httpPost } from './http';
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params });
在页面中直接调用：
import { getorglist } from '@/assets/js/api';
getorglist({ id: 200 }).then(res => {console.log(res);
});
4. 添加请求拦截器
在请求拦截器中添加通用逻辑，如设置token：
axios.interceptors.request.use(config => {const token = localStorage.getItem('token');token && (config.headers.Authorization = token);return config;
}, error => Promise.reject(error));
5. 添加响应拦截器
在响应拦截器中处理通用错误和业务逻辑：
axios.interceptors.response.use(response => {if (response.status === 200) {// 根据状态码处理业务逻辑return Promise.resolve(response.data);} else {return Promise.reject(response);}
}, error => {// 处理错误return Promise.reject(error);
});
小结
封装 axios 是提升项目代码质量的重要手段。合理的封装不仅能减少重复代码，还能提高代码的可维护性和可读性。封装方案应根据项目需求灵活设计。
