js.Promise 简介及例子

2016-07-15  本文已影响0人  许道龙

用于管理与异步API交互的抽象对象,避免使用回调函数的层层嵌套

状态:等待->完成->拒绝

必须有一个then(),第一个参数是resolved,第二个是rejected函数;

实例:
查询学生的信息列表,有一个文本框可以输入学生的姓名,可以进行查找指定的学生信息,如果不存在就不进行学生信息列表的查询了,如果存在,再进行下一步的查询。

<script type="text/javascript">

        //判断是否存在该学生姓名
        var isExistStu = function (name) {
            var promise = new Promise(function (resolve, reject) {
                $.ajax({
                    type: "Post",
                    url: "/student/student/checkstu",
                    dataType: "json",
                    data: JSON.stringify({
                        name: name
                    }),
                    contentType: "application/json;charset-utf-8",
                    success: function (data) {
                        resolve(data);  //data 返回来的是 true 或者 false
                    }
                });
            });
        }

        //查询根据学生姓名查询学生信息列表
        var searchStu = function (name) {
            var promise = new Promise(function (resolve, reject) {
                $.ajax({
                    type: "Post",
                    url: "/student/student/getstulist",
                    dataType: "json",
                    data: JSON.stringify({
                        name: name
                    }),
                    contentType: "application/json;charset-utf-8",
                    success: function (data) {
                        resolve(data);  //data 返回来的是学生信息列表
                    }
                });
            });
        }

        

        window.onload = function () {
            var stuName = $("txtName").val();
            isExistStu(stuName).then(function (data) {
                if (data == "true") {
                    return searchStu(stuName);
                }
                else {
                    return;
                }
            }).then(function (data) {
                showTable(data);
            })
        }

        //展示 学生信息列表表格
        function showTable(data) {
            var html = "<table>";
            for (var i = 0; i < data.length; i++) {
                html += "<tr>";
                html += "<td>" + data.name + "</td>";
                html += "<td>" + data.address + "</td>";
                html += "</tr>";
            }
            html += "</table>";

            $("#divTable").html(html);
        }

    </script>
    
    
    
    
    function add(xPromise,yPromise) {
    // `Promise.all([ .. ])`接收一个Promise的数组,
    // 并返回一个等待它们全部完成的新Promise
    return Promise.all( [xPromise, yPromise] )

    // 当这个Promise被解析后,我们拿起收到的`X`和`Y`的值,并把它们相加
    .then( function(values){
        // `values`是一个从先前被解析的Promise那里收到的消息数组
        return values[0] + values[1];
    } );
}

// `fetchX()`和`fetchY()`分别为它们的值返回一个Promise,
// 这些值可能在 *现在* 或 *稍后* 准备好
add( fetchX(), fetchY() )

// 为了将两个数字相加,我们得到一个Promise。
// 现在我们链式地调用`then(..)`来等待返回的Promise被解析
.then( function(sum){
    console.log( sum ); // 这容易多了!
} );

上一篇下一篇

猜你喜欢

热点阅读