HTML封装AJAX请求,在请求里面写登录的逻辑 ajax 网络请求 post

92 篇文章 4 订阅

调用方法: 先引用config.js,然后调用封装网络请求。

里面三个参数  1.url, 2.请求需要提交的数据,  3.请求类型


// 获取二维码、背景图片接口
getScheduleInfo() {
	var url = '/v1/basketball/getQRCode.do';
	var params = {
		phone: '13977284414'
	}
	config.RequestData(url, params,'get')
        .then(res => {
		    console.log('获取二维码、背景图片接口', res.module);
	    }).catch(error => {
			console.log(error);
	    })
},

config.js代码:

这里根据我代码的实际情况,在封装的网络请求里面做了登录的判断,如果没有登录,就先调登录接口,然后再重新请求。

这里我把用户唯一标识(session)和活动id(activityId)也放到 data 中,并且根据不同的情况用不同的域名进行网络请求。可以根据你自己的需求做修改。

const config = {
	USERhttpURL: 'https://aaa.cn', // 测试环境1
	httpURL: 'https://bbb.cn', //测试环境2
	// 授权登录接口 
	toLoginOk: (url, data = {}, method = 'post', resolve) => {
		console.log('调用登录接口,获取session')
		var login_url;
		var login_params = {
			auth_user: config.getUrlkey(location.href).auth_user ? config.getUrlkey(location.href).auth_user : ''
		}
		if (config.getUrlkey(location.href).activityId) {
			login_url = config.httpURL + '/actcenter/v1/user/login.do';
			login_params.activityId = config.getUrlkey(location.href).activityId;
		} else {
			login_url = config.USERhttpURL + '/v1/user/login.do';
			console.log('是个人中心接口---toLoginOk', login_url)
		}
		$.ajax({
			type: 'post',
			url: login_url,
			contentType: 'application/x-www-form-urlencoded;charset=utf-8',
			data: login_params,
			dataType: "json",
			complete: res => {
				res = res.responseJSON
				if (res.success) {
					var session = res.module; // session 
					if (session) {
						if(config.getUrlkey(location.href).activityId){
							localStorage.setItem('session', session); // 设置缓存
						}else{
							localStorage.setItem('userSession', session); // 设置缓存
						}
						config.ajaxIng(url, data, method, resolve);
					}
				} else {}
			}
		})
	},
	// 网络请求中
	ajaxIng(url, data, method, resolve) {
		if (config.getUrlkey(location.href).activityId) {
			url = config.httpURL + url;
			data.activityId = config.getUrlkey(location.href).activityId;
			data.session = localStorage.getItem('session');
		} else {
			url = config.USERhttpURL + url;
			data.session = localStorage.getItem('userSession');
			console.log('是个人中心接口---ajaxIng', url)
		}
		$.ajax({
			type: method,
			url: url,
			contentType: 'application/x-www-form-urlencoded;charset=utf-8',
			data: data,
			dataType: "json",
			complete: res => {
				if (res.success) {
					resolve(res); // 成功
				} else {
					reject(res); // 失败
				}
			}
		})
	},
	// 封装数据请求
	/**
	 * url   请求的api               必传
	 * data  请求参数{}              非必传
	 * method  请求方法  get、post   非必传
	 */
	RequestData: (url, data = {}, method = 'post') => {
		return new Promise((resolve, reject) => {
			//如果是篮球活动,就会有 configActivityId  篮球活动用的是 session  个人中心用的是 userSession
			if (config.getUrlkey(location.href).activityId) {
				if (localStorage.getItem('session')) {
					config.ajaxIng(url, data, method, resolve);
				} else {
					config.toLoginOk(url, data, method, resolve)
				}
			} else {
				if (localStorage.getItem('userSession')) {
					config.ajaxIng(url, data, method, resolve);
				} else {
					config.toLoginOk(url, data, method, resolve)
				}
			}
		})
	},

	// url参数解析
	getUrlkey: function(url) {
		var params = {};
		try {
			var urls = url.split("?");
			var arr = urls[1].split("&");
			for (var i = 0, l = arr.length; i < l; i++) {
				var a = arr[i].split("=");
				params[a[0]] = a[1];
			}
		} catch (e) {
			//TODO handle the exception
		}

		return params;
	}
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a_靖

对你有帮助吗?打赏鼓励一下?

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值