小言_互联网的博客

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

422人阅读  评论(0)

调用方法: 先引用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;
	}
}

 


转载:https://blog.csdn.net/qq_35713752/article/details/100053950
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场