Skip to main content
 Web开发网 » 站长学院 » 浏览器插件

前端小技巧:使用promise封装ajax请求

2021年11月26日6040百度已收录

前端小技巧:使用promise封装ajax请求  ajax开发技巧 第1张

首先作为前端开发人员,大家都应该使用过Ajax发送请求,目前市面上流行的发送Ajax请求的方式为以下三种:

Jquery的$.ajax()尤雨溪推荐的axioses6新出的fetch方法这三种方法的区别详见文章ajax三种方式的区别,这里不再详细解释。

本篇文章主要讲工作中是如何使用ajax请求,也就是让ajax结合promise使用。

1.为什么要包装ajax?小明同学说:“直接发送ajax请求不就得了,干嘛那么麻烦。”于是小明很顺畅的写下以下代码:

//以$.ajax发送方式为例$.ajax({ type:"POST", url:"请求。很明显,这种写法会有以下几个缺点:

代码重复率很高,过于臃肿代码可读性很差,不利于后期的维护所以这种最"直接"的写法真所谓的费力不讨好,代码量变大,最后的效果反而不好,所以在工作中一定要避免重复劳动。

2.为什么要选择promise封装ajax?看到上面的缺点,另外一位同学小刚说:“OK,我封装Ajax,但我直接用函数封装,不用Promise封装,那不是也可以避免重复劳动嘛。”于是小刚写下以下代码:

function ajax(url,data={},type="GET",callback){ $.ajax({ type:type, url:url, data:data, dataType:"json", success:function (data) { callback(data); } })}let url="请求就可以完美解决这个问题,最后写出以下代码:

function ajax(url,data={},type="GET"){ return new Promise((resolve, reject) => { $.ajax({ type:type, url:url, data:data, dataType:"json", success:function (data) { resolve(data); }, error:function (err) { reject(err); } }) }) }let url=");})一下这一行代码很重要,一定要记住:

return new Promise((resolve, reject) => { })

评论列表暂无评论
发表评论
微信