jQuery ajax 的 Promise 风格写法

雨点打透心脏的1/2处 2022-01-06 04:17 315阅读 0赞

> ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。

ajax 绝对是 jQuery库中最重要的方法，大大的简化了ajax请求的编码过程，使用方式优美。如果说不足之处就是当许多功能需要连续调用，环环相扣依赖时，代码全部一层一层的嵌套，看起来就很庞大，很恶心，就产生了回调地狱。后来 ECMAScript 6 的出现，拥有了新的 Promise 函数，解决了这一痛点。

其实在 jQuery 中早就已经拥有了类似 Promise 的写法，只是各个基础教程的网站中都没有提及到。下面是高光时刻，各位戴好墨镜。

先看一下常用的使用方法：  
（$.post，$.get，$.ajax 三者都是一样，如果是默认情况下，多多使用post 和 get方法即可，老是写一堆，不觉得累么？）

$.post('ajax/test.html', function(res) {
        console.log(res)
    });

在官方文档的描述中写道：$.ajax() 返回其创建的 XMLHttpRequest 对象。那上面的代码可以改写成如下代码。

var testAjax=$.post('ajax/test.html', function(res) {
        console.log(res)
    });

emmm...就算用变量接收了 XMLHttpRequest 对象，好像代码完全没发现有什么不同啊。正式进入 Promise 代码写法之前先有几个重要的事情说一下：

1.  在jQuery 1.5版本中引进方法，分别是 jqXHR.success()、jqXHR.error()、jqXHR.complete()。该方法在jQuery 1.8 版本中已不赞成使用。
2.  在jQuery 1.6版本中新增方法，分别是 jqXHR.done()、jqXHR.fail()、jqXHR.always()。
3.  在jQuery 3.0版本删除了1.5版本引进的方法，保留了1.6版本中新增的方法。
4.  照上述3点来看，在版本 1.6 ~ 2.2 中 以上两个版本引进的方法是可以同时使用的。

下面正式上源码：

上面的代码演示了 Promise 代码写法，很好的避免多重嵌套问题。该方法和jQuery版本有关，那jQuery的版本应该如何选择呢？

请阅读小编的原创文章[《jQuery 如何选择正确的版本》][jQuery]，  
文章地址：[https://blog.csdn.net/u013350495/article/details/93501604][jQuery]

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[jQuery]: https://blog.csdn.net/u013350495/article/details/93501604
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20211228/da176531359f43a2bbd81b6ff5308857.png