前言
在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。
下面就是前端小白对于axios的简单封装。
1.安装
npm install axios; // 安装axios复制代码
2.引入
一般我会在项目的src目录中，新建一个api文件夹，然后在里面新建一个api.js和一个request.js文件。api.js用来统一管理我们的接口，request.js文件用来封装axios。
3.封装
request.js中写对于axios的封装。首先引入axios、qs依赖，引入main.js主要是用于后面对接口进行统一处理，比如调接口的时候，显示loading等。
import axios from 'axios'import qs from 'qs'import ServerMixin from '@/mixin/ServerMixin'export const doExec = (url, params, contentType, methods) => { let pstr = qs.stringify(params, { arrayFormat: 'brackets' }) return axios({ //设置请求的接口地址 url: (methods && methods.toUpperCase()) !== 'GET' ? url : `${url}?${pstr}`, //params是添加到url的请求字符串中的，用于get请求 params: null, //data是添加到请求体（body）中的， 用于post请求。java后台用qs转 data: (contentType && contentType.toUpperCase()) === 'JSON' ? params : qs.stringify(params), //请求方法，默认GET method: methods || 'POST', //这里的请求头与后台商量设置 headers: { // 'x-auth-token': getUserInfo() == undefined ? "" : getUserInfo().token } }) .then((res) => { return res.data })}复制代码 在api.js中引入doExec方法。
import { doExec } from '@/api/request'const apiPrefix = window.apiPrefixexport const api = { // 用户 user: { // 登录 login(opts) { return doExec(`${apiPrefix}user/login`, opts) }, }}复制代码 axios实例创建好之后，开始使用request拦截器对axios请求配置做统一处理，具体如下：
//设置超时时间axios.defaults.timeout = 10000;//添加请求拦截器axios.interceptors.request.use(config => { //此处可以自行设置Loadding return config}, error => { return Promise.reject(error)})//添加响应拦截器axios.interceptors.response.use(response => { if (response.data.code == 4) { ServerMixin.Event.$emit('login') } return response}, error => { console.log(error.response.status) if (error.response !== undefined) { switch (error.response.status) { case 404: if (window.sessionStorage.getItem('out') === null) { window.sessionStorage.setItem('out', 1) MessageBox.confirm('登陆超时！', '提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { store.dispatch("logout") }).catch(action => { console.log(action) }) } //...其他状态码根据业务需求变更。 break default: MessageBox.alert(`连接错误${error.response.status}`) } return Promise.resolve(error.response) } return Promise.reject(error)})复制代码 4.调用
现在只需要在业务模块直接调用$api，调用对应方法即可：
export default { data() { return { form: { account: "admin", password: "admin" } }; }, methods: { login() { this.$api.user.login(this.form).then((res) => { console.log(res); }) } }};复制代码