js.Promise 简介及例子

用于管理与异步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 ); // 这容易多了!
} );

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,268评论 19 139
  • 00、前言Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区...
    夜幕小草阅读 2,157评论 0 12
  • Promiese 简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,语法上说,Pr...
    雨飞飞雨阅读 3,406评论 0 19
  • Promise的含义:   Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和...
    呼呼哥阅读 2,215评论 0 16
  • 2016呃 不!是2017年1月3号,农历十二月初六。 早上,突然收到老妈的微信信息,说今天是我生日,祝我生日快...
    _梓_不语阅读 145评论 2 0