欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

axios与vue的封装

程序员文章站 2022-07-02 12:16:09
...

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;
	}

}

相关标签: js vue.js