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