首页 > 代码库 > JavaScript及其异步实现续:Promise让一切更简单

JavaScript及其异步实现续:Promise让一切更简单

2024-07-07 00:28:52   226人阅读


在写这篇文章之前，我参考了以下文章。所以我文中的例子都是精准的，而且有循可依。下面抛出例子的链接：
Understanding JQuery.Deferred and Promise
Deferred and promise in jQuery

Edit:在翻网站的时候，看到腾讯技术团队居然也刚写了一篇Promise的文章，加下链接，以作备忘。

JavaScript Promise启示录

Deferred在JQuery1.5的版本被引进，这项功能的引进使JQuery变得更加强大，良好的异步支持，让书写异步JS变得简单轻松，而且充满了乐趣。
强大的链式书写方法，显得极为优雅。当你在程序中，创建了一个Deferred方法以后，你就可以使用下面的方法来进行异步操作了：

操作方法：
deferred.resolve()：将会调用Done callbacks （完成执行）回调函数。
deferred.reject()：将会调Fail callbacks （失败执行）回调函数。

回调事件：
deferred.done():添加完成执行的回调函数。
deferred.fail()：添加失败执行的回调函数。
deferred.always()：添加完成执行，或者失败执行的回调函数。

执行方式：
deferred.when()：根据条件，执行回调。
deferred.then()：可以添加完成执行，失败执行或者正在执行的Deferred对象。

其他：
jQuery.Deferred()：将方法加入回调队列。
.promise()

首先来看一个例子，我会在例子中加入足量的注释来让事情变得简单易懂。我们这里以陆游的一首诗为例：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script type="text/javascript">
 
    var UIIntrop = function () {
        //获取Derferred对象，以便于将方法加入到异步队列中
        var deferred = $.Deferred();
        setTimeout(function () {
            $(".con").append("陆游诗一首").append("<br/>");
            //derferred执行通过
            deferred.resolve();
        }, 1);
        //返回promise对象，以便于利用then方法控制其执行
        return deferred.promise();
    }
 
    //获取标题
    var GetTitle = function () {
        //由于Jquery中的$.ajax方法默认返回为promise对象，所以我们写ajax方法可以按照下面的方式来书写
        var promise = $.ajax({
            url: "../Home/GetTitle",
            type: "post"
        });
        promise
            //如果ajax执行完成，执行该方法，需要注意的是，done可以被多次调用
            .done(function (data) {
                $(".con").append(data.message).append("<br/>");
            })
            //第二次触发done方法
            .done(function () {
                $(".con").append("----------------------------").append("<br/>");
            })
            //如果ajax执行失败
            .fail(function () {
                $(".con").append("标题获取出错").append("<br/>");
            });
        return promise;
    }
 
    //获取第一句
    var GetFirst = function () {
        var promise = $.ajax({
            url: "../Home/GetSecond",
            type: "post",
            //这里也可以用ajax原生的方式来触发成功执行的方法
            success: function (data) {
                $(".con").append(data.message).append("<br/>");
            }
        });
        return promise;
    }
 
    //获取第二句，这里的解释和上面类似
    var GetSecond = function () {
        var deferred = $.Deferred();
        $(".con").append("丰年留客足鸡豚。").append("<br/>");
        deferred.resolve();
        return deferred.promise();
    }
 
    var GetFour = function (){
        var deferred = $.Deferred();
        $(".con").append("柳暗花明又一村。").append("<br/>");
        deferred.resolve();
        return deferred.promise();
    }
 
    //第一个函数执行
    UIIntrop()
        //第二个函数获取诗歌的标题
        .then(GetTitle)
        //第三个函数获取诗歌第一句
        .then(GetFirst)
        //第四个函数获取诗歌第二句
        .then(GetSecond)
        //下面获取诗歌第三句
        .then(function (value) {
            $(".con").append("山重水复疑无路，").append("<br/>");
        })
        //最后获取诗歌第四句，需要注意的是，最后一个函数主要是进行错误捕获的，前面所有的函数，只要执行出错，都会自动被最后一个函数捕获。
        .then(GetFour,
              function (data) {
                  $(".con").append("出现了错误."+data.responseText).append("<br/>");
              });
</script>
<div class="con"></div>

这样我们得到的结果就如下图所示:

image

这样就实现了javascript异步效果.

由于在最后一个then中,我们注册了两个函数,一个是GetFour,另外一个则是FailCallBack,也就是说,当上面的所有Promise 函数中,如果执行失败的话,都会跳入到这个函数里面来.

假设这里我们将GetTitle方法修改一下,让其找不到执行的Controller:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//获取标题
   var GetTitle = function () {
       //由于Jquery中的$.ajax方法默认返回为promise对象，所以我们写ajax方法可以按照下面的方式来书写
       var promise = $.ajax({
           url: "../Home/Controller被我修改，已经无法找到",
           type: "post"
       });
       promise
           //如果ajax执行完成，执行该方法，需要注意的是，done可以被多次调用
           .done(function (data) {
               $(".con").append(data.message).append("<br/>");
           })
           //第二次触发done方法
           .done(function () {
               $(".con").append("----------------------------").append("<br/>");
           })
           //如果ajax执行失败
           .fail(function () {
               $(".con").append("标题获取出错").append("<br/>");
           });
       return promise;
   }

当我们执行的时候，错误就出来了：

image

这里提示已经很明显了，并且错误被最后的failCallback给捕获了。


联系
我们