Jquery的Ajax简易优化思路

Jquery的Ajax简易优化思路

如今的前端领域各类轻量组件、代码库非常丰富，小伙伴们基本不会再用原生JS或者JQ进行业务交付。我偶然一次机会，做一个手机端H5应用的Demo，因为从未有过移动端开发经验，并且时间也算充裕，索性利用JQ开发一套UI库、函数库去完成Demo开发，顺带回顾一下原生知识。
这里记录一下我在Demo里关于异步请求的简易优化。

场景

我对接的接口开发是一个经验相对缺乏的小伙伴。其Rest接口数据定义、资源路径定义奇思妙想千奇百怪令我大开眼界。所以接口返工、接口拆解、资源路径重定义，包括对接环境多样是我面临的挑战。
异步优化思路主要针对上诉挑战开展的。

关键代码

异步请求部分。为了减少Ajax请求通篇重复的MIME、URL、TYPE、HEADER等，这里将涉及的请求配置成“策略”；当然，如果后续要做接口切面，也可以在requestAction函数里添加对应拦截逻辑。

let METHOD = {
	GET: 'GET',
	POST: 'POST',
	PUT: 'PUT',
	DELETE: 'DELETE'
};

let httpService = (()=> {
	let requestAction = (type, url, sucCb, failCb, queryBody)=> {
		if(!type || !url) { return; }
		let ajaxObj = {
			url: url,
			type: type,
			success: sucCb,
			error: failCb
		};
		if([METHOD.POST, METHOD.PUT].indexOf(type) > -1) {
			if(queryBody) { ajaxObj['data'] = JSON.stringify(queryBody); }
		}
		// TODO 补充请求头
		$.ajax(ajaxObj);
	};

	return {
		get: (url, suc, fail)=> requestAction(METHOD.GET, url, suc, fail),
		post: (url, suc, fail, queryBody)=> requestAction(METHOD.POST, url, suc, fail, queryBody),
		put: (url, suc, fail, queryBody)=> requestAction(METHOD.PUT, url, suc, fail, queryBody),
		delete: (url, suc, fail)=> requestAction(METHOD.DELETE, url, suc, fail)
	};
})();

由于对接地址和资源路径多变，这里将两者也配置成策略对象。

const host = 'https://127.0.0.1';
const NA_URLS = {
	//查用户
	USERS: '/api/v3/users'
};

function getUrl(url) {
	return host + url;
}

调用方式：

httpService.get(getUrl(NA_URLS.USERS), rsp=> console.log( rsp), err=> console.log(err));