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

2021-10-18 前端達(dá)人

什么是異步？

異步與同步是相反的

簡(jiǎn)單來(lái)理解就是：同步按你的代碼順序執(zhí)行，異步不按照代碼順序執(zhí)行，異步的執(zhí)行效率更高。

什么時(shí)候用異步編程

在前端編程中（甚至后端有時(shí)也是這樣），我們?cè)谔幚硪恍┖?jiǎn)短、快速的操作時(shí)，例如計(jì)算 1 + 1 的結(jié)果，往往在主線程中就可以完成。主線程作為一個(gè)線程，不能夠同時(shí)接受多方面的請(qǐng)求。所以，當(dāng)一個(gè)事件沒(méi)有結(jié)束時(shí)，界面將無(wú)法處理其他請(qǐng)求。

現(xiàn)在有一個(gè)按鈕，如果我們?cè)O(shè)置它的 onclick 事件為一個(gè)死循環(huán)，那么當(dāng)這個(gè)按鈕按下，整個(gè)網(wǎng)頁(yè)將失去響應(yīng)。

為了解決類似這種問(wèn)題，JavaScript 中的異步操作函數(shù)往往通過(guò)回調(diào)函數(shù)來(lái)實(shí)現(xiàn)異步任務(wù)的結(jié)果處理。

回調(diào)函數(shù)

回調(diào)函數(shù)就是一個(gè)函數(shù)，它是在我們啟動(dòng)一個(gè)異步任務(wù)的時(shí)候就告訴它：等你完成了這個(gè)任務(wù)之后要干什么。這樣一來(lái)主線程幾乎不用關(guān)心異步任務(wù)的狀態(tài)了，他自己會(huì)善始善終。

例如：




    

        

            

            

        

        

            
                <!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>回調(diào)</title>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <button>點(diǎn)擊</button>
            

        

    

    

        

            

            

        

        

            
                <p></p>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                function fn1(){
            

        

    

    

        

            

            

        

        

            
                btn.onclick = function(){
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                setTimeout(fn1,1000)
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            
                </html>

它的第一個(gè)參數(shù)是個(gè)回調(diào)函數(shù)，第二個(gè)參數(shù)是毫秒數(shù)，這個(gè)函數(shù)執(zhí)行之后會(huì)產(chǎn)生一個(gè)子線程，子線程會(huì)等待 1 秒，然后執(zhí)行回調(diào)函數(shù) "fn1"，在命令行輸出 "我出現(xiàn)了！"。

Promise 的使用

語(yǔ)法格式：




    

        

            

            

        

        

            
                new Promise(function (resolve, reject) {
            

        

    

    

        

            

            

        

        

            
                console.log("Run");
            

        

    

    

        

            

            

        

        

            
                });

resolve和reject是參數(shù)

再看這個(gè)例子：




    

        

            

            

        

        

            
                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");
            

        

    

    

        

            

            

        

        

            
                });

這段打印結(jié)果為：

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

這三個(gè)方法的參數(shù)都是一個(gè)函數(shù)，

.then() 可以將參數(shù)中的函數(shù)添加到當(dāng)前 Promise 的正常執(zhí)行序列，

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

.finally() 是在 Promise 執(zhí)行的最后一定會(huì)執(zhí)行的序列。 .then() 傳入的函數(shù)會(huì)按順序依次執(zhí)行，有任何異常都會(huì)直接跳到 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);
            

        

    

    

        

            

            

        

        

            
                });

打印結(jié)果為：

1111
2222
3333
An error

resolve() 中可以放置一個(gè)參數(shù)用于向下一個(gè) then 傳遞一個(gè)值，then 中的函數(shù)也可以返回一個(gè)值傳遞給 then。但是，如果 then 中返回的是一個(gè) Promise 對(duì)象，那么下一個(gè) then 將相當(dāng)于對(duì)這個(gè)返回的 Promise 進(jìn)行操作，這一點(diǎn)從剛才的計(jì)時(shí)器的例子中可以看出來(lái)。

reject() 參數(shù)中一般會(huì)傳遞一個(gè)異常給之后的 catch 函數(shù)用于處理異常。

但是請(qǐng)注意以下兩點(diǎn)：