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>