axios与vue的封装

axios与vue的封装

var $axios = axios.create({
	baseURL: 'http://localhost:8080/', //设置基本路径
	// `withCredentials` 表示跨域请求时是否需要使用凭证(是否发送sessionid)
	withCredentials: true, // 默认的
});
//判断Vue是否存在
if (Vue) {
	//给Vue对象添加axios的原型属性
	Vue.prototype.$axios = $axios;
	//给Vue添加一个原型函数,其中参数为promiseHandler为一个axios请求函数
	Vue.prototype.$ajax = function(getPromiseHandler) {
		//创建一个promise对象,resolve为成功后执行的方法, reject失败后执行的方法
		let promise = new Promise((resolve, reject) => {
			try {
				//显示信息加载层
				let loadIndex = layer.load();
				getPromiseHandler
					.then((response) => {
						//获得请求后，关闭加载层，进行处理
						layer.close(loadIndex);
						//获取response中的信息,result是从服务端请求的数据信息
						let result = response.data;
						//该结果中包含像服务端请求的一切信息，包括判断是否登录验证，等等
						//判断result中是否包含login属性，如果不包含，表示该操作不需要登录验证
						//hasOwnProperty方法为对象的方法，用来判断属性是否存在一个对象,
						//如果不存在，表示不需要登录验证，直接通过
						if (!result.hasOwnProperty("login")) {
							//如果不包含login属性，直接通过
							resolve(result);
							return;
						}
						//表示包含login属性，判断是否已登录
						if (!result.login) { //表示未登录，跳转登录页面
							layer.msg('请登录后访问', {
								icon: 7,
								time: 1000 //2秒关闭（如果不配置，默认是3秒）
							}, function() {
								window.top.location.href = "../login/login.html" //顶级跳转登录页面，
							});
							return;
						}
						//登录成功后
						resolve(result); //登录成功，返回信息
					})
					.catch((err) => {
						//请求失败后，同样关闭加载层
						layer.close(loadIndex);
						if (error.response) {
							// 请求已发出，但服务器响应的状态码不在 2xx 范围内
							console.log(error.response.data);
							layer.msg('请求出错', {
								icon: 7,
								time: 2000 //2秒关闭（如果不配置，默认是3秒）
							});
						} else {
							// Something happened in setting up the request that triggered an Error
							layer.msg('系统升级中。。。', {
								icon: 7,
								time: 2000 //2秒关闭（如果不配置，默认是3秒）
							});
							console.log('Error', error.message);
						}
						console.log(error.config);
					});
			} catch (e) { //代码错误问题
				layer.close(loadIndex);
				layer.msg('JavaScript代码错误:' + error.message, {
					icon: 2,
					time: 1500
				});
			}
		});
		//将promise对象返回
		return promise;
	}
	//添加一个原型get方法
	Vue.prototype.$myGet = function(url, config) {
		let promise = new Promise((resolve, reject) => {
			this.$ajax(this.$axios.get(url, config))
				.then((result) => {
					resolve(result);
				});
		});
		return promise;
	}
	//添加一个原型post方法
	Vue.prototype.$myPost = function(url, data, config) {
		let promise = new Promise((resolve, reject) => {
			this.$ajax(this.$axios.post(url, data, config))
				.then((result) => {
					resolve(result);
				});
		});
		return promise;
	}
	//添加一个原型put方法
	Vue.prototype.$myPut = function(url, data, config) {
		let promise = new Promise((resolve, reject) => {
			this.$ajax(this.$axios.put(url, data, config))
				.then((result) => {
					resolve(result);
				});
		});
		return promise;
	}
	//添加一个原型delete方法
	Vue.prototype.$myDelete = function(url, config) {
		let promise = new Promise((resolve, reject) => {
			this.$ajax(this.$axios.delete(url, config))
				.then((result) => {
					resolve(result);
				});
		});
		return promise;
	}

}