JavaScript——異步操作以及Promise 的使用

2021-10-18 前端達人

什么是異步？

異步與同步是相反的

簡單來理解就是：同步按你的代碼順序執行，異步不按照代碼順序執行，異步的執行效率更高。

什么時候用異步編程

在前端編程中（甚至后端有時也是這樣），我們在處理一些簡短、快速的操作時，例如計算 1 + 1 的結果，往往在主線程中就可以完成。主線程作為一個線程，不能夠同時接受多方面的請求。所以，當一個事件沒有結束時，界面將無法處理其他請求。

現在有一個按鈕，如果我們設置它的 onclick 事件為一個死循環，那么當這個按鈕按下，整個網頁將失去響應。

為了解決類似這種問題，JavaScript 中的異步操作函數往往通過回調函數來實現異步任務的結果處理。

回調函數

回調函數就是一個函數，它是在我們啟動一個異步任務的時候就告訴它：等你完成了這個任務之后要干什么。這樣一來主線程幾乎不用關心異步任務的狀態了，他自己會善始善終。

例如：




    

        

            

            

        

        

            
                <!DOCTYPE html>
            

        

    

    

        

            

            

        

        

            
                <html lang="en">
            

        

    

    

        

            

            

        

        

            
                <head>
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8">
            

        

    

    

        

            

            

        

        

            
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
            

        

    

    

        

            

            

        

        

            
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            

        

    

    

        

            

            

        

        

            
                <title>回調</title>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <button>點擊</button>
            

        

    

    

        

            

            

        

        

            
                <p></p>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var btn = document.querySelector('button');
            

        

    

    

        

            

            

        

        

            
                function fn1(){
            

        

    

    

        

            

            

        

        

            
                btn.onclick = function(){
            

        

    

    

        

            

            

        

        

            
                document.querySelector('p').innerHTML = '我出現了！'
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                setTimeout(fn1,1000)
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            
                </html>

它的第一個參數是個回調函數，第二個參數是毫秒數，這個函數執行之后會產生一個子線程，子線程會等待 1 秒，然后執行回調函數 "fn1"，在命令行輸出 "我出現了！"。

Promise 的使用

語法格式：




    

        

            

            

        

        

            
                new Promise(function (resolve, reject) {
            

        

    

    

        

            

            

        

        

            
                console.log("Run");
            

        

    

    

        

            

            

        

        

            
                });

resolve和reject是參數

再看這個例子：




    

        

            

            

        

        

            
                new Promise(function (resolve, reject) {
            

        

    

    

        

            

            

        

        

            
                var a = 0;
            

        

    

    

        

            

            

        

        

            
                var b = 1;
            

        

    

    

        

            

            

        

        

            
                if (b == 0) reject("Divide zero");
            

        

    

    

        

            

            

        

        

            
                else resolve(a / b);
            

        

    

    

        

            

            

        

        

            
                }).then(function (value) {
            

        

    

    

        

            

            

        

        

            
                console.log("a / b = " + value);
            

        

    

    

        

            

            

        

        

            
                }).catch(function (err) {
            

        

    

    

        

            

            

        

        

            
                console.log(err);
            

        

    

    

        

            

            

        

        

            
                }).finally(function () {
            

        

    

    

        

            

            

        

        

            
                console.log("End");
            

        

    

    

        

            

            

        

        

            
                });

這段打印結果為：

.then() .catch() 和 .finally() 三個方法

這三個方法的參數都是一個函數，

.then() 可以將參數中的函數添加到當前 Promise 的正常執行序列，

.catch() 則是設定 Promise 的異常處理序列，

.finally() 是在 Promise 執行的最后一定會執行的序列。 .then() 傳入的函數會按順序依次執行，有任何異常都會直接跳到 catch 序列：




    

        

            

            

        

        

            
                new Promise(function (resolve, reject) {
            

        

    

    

        

            

            

        

        

            
                console.log(1111);
            

        

    

    

        

            

            

        

        

            
                resolve(2222);
            

        

    

    

        

            

            

        

        

            
                }).then(function (value) {
            

        

    

    

        

            

            

        

        

            
                console.log(value);
            

        

    

    

        

            

            

        

        

            
                return 3333;
            

        

    

    

        

            

            

        

        

            
                }).then(function (value) {
            

        

    

    

        

            

            

        

        

            
                console.log(value);
            

        

    

    

        

            

            

        

        

            
                throw "An error";
            

        

    

    

        

            

            

        

        

            
                }).catch(function (err) {
            

        

    

    

        

            

            

        

        

            
                console.log(err);
            

        

    

    

        

            

            

        

        

            
                });