JavaScript中 Promise的学习以及使用

Posted 2020-07-09 ck168

今天一个哥们发过来一段js代码，没看懂，就顺便学习了一下，代码如下

 Promise.resolve(‘zhangkai‘).then(value => {console.log(value)})

经过搜索，才知道是Promise的应用，于是就做一下笔记，整理一下，以及项目中可以派上的用场。

 

什么是Promise对象

Promise对象是CommonJS工作组为异步编程提供的统一接口，是ECMAScript6中提供了对Promise的原生支持，Promise就是在未来发生的事情，使用Promise可以避免回调函数的层层嵌套，还提供了规范更加容易的对异步操作进行控制。提供了reject,resolve,then和catch等方法。

 

优势在于连续的异步回调嵌套的场景，可以用一种近似于同步的语法来表现。

 

Promise 的存在不是为了让语法看起来像同步，而是为了让回调的使用更有章法，更可控。

 

Promise对象的几个重要的点

1、promise有三种状态， 等待（pending）、已完成（fulfilled）、已拒绝（rejected）

2、promise的状态只能从“等待”转到“完成”或者“拒绝”，不能逆向转换，同时“完成”和“拒绝”也不能相互转换

3、promise必须有一个then方法，而且要返回一个promise，供then的链式调用，也就是可thenable的

4、then接受俩个回调(成功与拒绝),在相应的状态转变时触发，回调可返回promise，等待此promise被resolved后，继续触发then链

 

Promise对象的写法：

var p=new Promise(function(resolve,eject){
    resolve("ok");    
});
p.then(function(value){console.log(val)},
 function(err)(console.log(err))       
);

then()方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。

有两种写法：

（1）Promise.resolve("foo"); 

　　所以才有了我这个哥们给我发的代码：Promise.resolve(‘zhangkai‘).then(value => {console.log(value)})

（2）var p = new Promise(function(resolve){   resolve("foo"); });

学习了Promise对象，想了想实际项目中的应用：

实际中有这么一个需求，查询学生的信息列表，有一个文本框可以输入学生的姓名，可以进行查找指定的学生信息，如果不存在就不进行学生信息列表的查询了，如果存在，再进行下一步的查询。（通过使用ajax实现）

首先，写一个通过ajax判断该学生是否存在的方法，然后，如果存在，写一个通过ajax查询该学生信息的方法；不存在的话，提示一下即可。

代码如下：

    <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>