K先生个人博客

当前位置:首页 > 爱技术 > 正文

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的内部图。

vue项目实战之alone-admin(六):axios的简单封装

作者K先生本文地址http://www.gold404.cn/info/116

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论

* 必填
可选
可选

评论列表

    暂时还没有评论哦!