zoukankan      html  css  js  c++  java
  • JavaScript中 Promise的学习以及使用

    今天一个哥们发过来一段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>
     
  • 相关阅读:
    fedora上部署ASP.NET——(卡带式电脑跑.NET WEB服务器)
    SQL Server 请求失败或服务未及时响应。有关详细信息,请参见事件日志或其它适合的错误日志
    8086CPU的出栈(pop)和入栈(push) 都是以字为单位进行的
    FTP 服务搭建后不能访问问题解决
    指定的 DSN 中,驱动程序和应用程序之间的体系结构不匹配
    Linux 安装MongoDB 并设置防火墙,使用远程客户端访问
    svn Please execute the 'Cleanup' command. 问题解决
    .net 操作MongoDB 基础
    oracle 使用绑定变量极大的提升性能
    尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,将出现此问题。
  • 原文地址:https://www.cnblogs.com/ck168/p/5513000.html
Copyright © 2011-2022 走看看