ajax then error,使用es6的then()方法封装jquery的ajax请求

2023-05-16

使用场景:

jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了。

示例代码:

/**

* 封装请求方法

* @param {Object} url 接口请求地址

* @param {Object} data 接口请求参数(无需请求方式参数,则此项可以为空,否则必须传)

* @param {Object} params 请求方式参数(可以为空)*/

functionajax(url, data, params) {return new Promise(function(resolve, reject) {

$.ajax({

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的解构赋值进行传参。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ajax then error,使用es6的then()方法封装jquery的ajax请求 的相关文章

随机推荐