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