vue项目实战之alone-admin（六）：axios的简单封装

在前端vue项目中，我们一般都是使用axios来向后端请求数据的，那么我们的alone-admin项目同样也是使用axios库来请求后端API数据的，当然如果你还不知道axios是什么，建议先去看一下axios的官方文档哈。一般使用axios的时候，我们都会先将axios做一个封装，这里我们会先对axios做一个通用而最基础的一个封装，后面还会再针对本项目做一个特异化的封装。

一、安装axios 

直接执行命令：npm install axios

二、封装axios

首先，我们先在项目根目录新建一个文件夹others，然后创建request.js文件，我们在这个js文件中封装axios：

import axios from 'axios'
import ElementUI from 'element-ui';
import Qs from 'qs'
import {
	Message
} from 'element-ui'
// 环境的切换
if (process.env.NODE_ENV === 'development') {
	axios.defaults.baseURL = '/'
	console.log('切换为本地开发环境')
} else if (process.env.NODE_ENV === 'debug') {
	axios.defaults.baseURL = '/'
	console.log('切换为debug调试环境')
} else if (process.env.NODE_ENV === 'production') {
	axios.defaults.baseURL = '/'
	console.log('切换为正式生产环境')
}
const fetch = axios.create({
	timeout: 1000,
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
	}
})

// 封装get方法
export function get(url, params = {}) {
	return new Promise((resolve, reject) => {
		fetch.get(url, {
				params: params
			})
			.then(res => {
				if (res.data.error_code == 0) {
					resolve(res.data.data);
				} else {
					Message("查看错误信息");
				}
			}).catch(err => {
				Message("请求错误！");
			})
	})
}

/**
 * 封装post方法
 */
export function post(url, params = {}) {
	return new Promise((resolve, reject) => {
		fetch.post(url, Qs.stringify(params))
			.then(res => {
				if (res.data.error_code == 0) {
					resolve(res.data.data);
				} else {
					Message("提示：" + res.data.msg);
				}
			})
			.catch(err => {
				reject(err)
			})
	})
}
/**
 * 封装put方法
 */
export function put(url, params = {}) {
	return new Promise((resolve, reject) => {
		fetch.put(url + "/" + params.id, Qs.stringify(params))
			.then(res => {
				if (res.data.error_code == 0) {
					resolve(res.data.data);
				} else {
					console.log(res)
					Message("提示：" + res.data.msg);
				}
			}).catch(err => {
				Message("请求错误！");
			})
	})
}
/**
 * 封装delete请求
 */
export function del(url, params = {}) {
	return new Promise((resolve, reject) => {
		fetch.delete(url + "/" + params.id)
			.then(res => {
				if (res.data.error_code == 0) {
					resolve(res.data.data);
				} else {
					Message("提示：" + res.data.msg);
				}
			})
			.catch(err => {
				reject(err)
			})
	})
}

在上面封装中，我直接使用了ElementUI来作为信息提示，就是请求错误的时候直接会弹出Element样式的错误提示，当然如果你的项目中，没有使用ElementUI，那么请自行把Element的内容给替换掉，本次的封装并没有添加拦截器什么的，先以简单易懂为主哈。

还有一点是，里面的封装的put和delete请求，参数使用url + "/" + params.id拼接是为了匹配本项目哈，可以自行修改成和封装的get请求一样。其实一般情况下，只要有get和post请求就够了，但本项目为了匹配restful规范的API，所以一下子封装了四种请求方法。

三、使用封装好的axios

封装好了，那么下面看一下怎么使用把。首先还是在other目录下新建api.js文件，内容如下：

import {get,post,put,del} from './request.js'
export const admin = params => get('/admins/admin.json', params)
export const login= params=>post('/login',params);

以后我们项目所用到的api接口，我们都直接写在这里面，方便维护管理。

接下来就是我们在vue组件中使用了，我们先导入：import { admin,login } from '../others/apis.js' ，之后就这样使用：

admin({page:page,pageSize:this.pageSize}).then(res=>{
	console.log(res)
})

这里就贴了一个示例，其他也一样的。

四、alone-admin的特异化axios封装（遵循restful api规范）

其实说特异化封装吧，改变的也不多，简单的说，就是我们请求一个实例，根据不同的参数，我们直接调用对应的GET、POST、PUT、DELETE方法，我们在api.js文件中多写一个方法，代码如下：

//特异化封装之前，对应restful需要写user变量
export const users = params => get('/users.json', params)
export const usersPost = params => post('/users.json', params)
export const usersPut = params => put('/users.json', params)
export const usersDel = params => del('/users.json', params)

//特异化封装之后，对应restful直接写一次
export const users = (method,params) => {
	return sendHttp('/users.json',params,method)
}
/**
 * @param {Object} url
 * @param {Object} params
 * @param {Object} method
 * 封装的restful风格的http请求
 */
function sendHttp(url,params,method){
	switch (method) {
		case 'POST':
			return post(url, params);
		case 'PUT':
			return put(url, params);
		case 'DELETE':
			return del(url, params);
		default:
			return get(url, params);
	}
}

至于使用方法，就是多传了一个参数。没啥难的，这就不多说了。欢迎到GitHub上面克隆alone-admin的源码进行细致观察，地址：https://github.com/pmb2020/alone-admin欢迎star，多谢支持。

最后贴一张alone-admin的内部图。