使用场景:
jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了。
示例代码:
/** * 封装请求方法 * @param {Object} url 接口请求地址 * @param {Object} data 接口请求参数(无需请求方式参数,则此项可以为空,否则必须传) * @param {Object} params 请求方式参数(可以为空) */ function ajax(url, data, params) { return new Promise(function(resolve, reject) { $.ajax({ url: "<{$params['wap_url']}>" + url, type: params && params.type || 'post', dataType: params && params.dataType || 'JSON', data: data, success: function(res) { resolve(res) }, error: function(res) { alert(res.m) } }); }); }
//引用方法 var params={ goods_id:"" } this.ajax("package/goodslist",params).then(function(data){ console.log(data) })
代码解析:
如上,ajax请求的具体请求在封装的方法中进行处理并返回响应数据,调用方法只需要传入接口地址、请求参数就可以了。
如果需要使用其他的请求方式,则通过 params 参数传入预置的 type 和 dataType。
如果需要设置其他的请求参数,则直接对封装方法中扩展就可以了 。
注意事项:
1. 本例只是根据当前需求进行了简单的封装,可以根据自己的需要进行调整。
2. 调用封装好的请求方法必须传入url参数,如果ajax请求的配置参数不需要额外设置的话,则接口请求参数可以不传,如:
this.ajax("package/goodslist").then(function(data){ console.log("ddd,",data) })
但是,如果ajax请求的配置参数需要配置,则接口参数即使没有,也得传个空值过去,如:
this.ajax("package/goodslist","",{type:"get"}).then(function(data){ console.log("ddd,",data) })
当然你可以尝试使用es6的解构赋值进行传参。