JavaScript異步編程之Promise的初步使用詳解

1. 概述

Promise對象是ES6提出的的異步編程的規范。說到異步編程,就不得不說說同步和異步這兩個概念。

從字面意思理解同步編程的話,似乎指的是兩個任務同步運行,如果這樣理解就錯瞭(至少筆者再沒有接觸到這個概念的時候有這種誤解)。同步和異步指的是代碼指定執行的順序(結構化編程范式的執行順序總是由上至下,由前往後的),如果執行的順序與代碼的相同,就是同步;如果不同,就是異步。

最初,操作系統都是基於命令行的,所有的的語言設計出來也天然是同步的語句,在這種情況下,也不需要異步編程。但是很快,圖形操作界面就出來瞭,所有的程序設計語言都不得不跟GUI打交道瞭。我們必須瞭解的是,GUI程序是一個不停繪制的界面程序:

while(done)
{
    dosomething();
    drawGUI();
}

如果每個循環中執行的任務dosomething()的事件太長,就會導致界面遲遲得不到繪制命令,直觀的表現就是卡頓。為瞭解決這個問題,使用JavaScript作為腳本的瀏覽器一般都會采用事件循環(Event Loop)的機制:

  • 將耗時的行為規定為事件,事件與響應回調函數綁定。
  • 每個循環,優先處理同步代碼。
  • 同步代碼完成,按照先後順序遍歷事件。
  • 在剩下的沒有同步代碼的循環中,依次執行事件的相應函數。

這樣,在單線程的情況下,就修改瞭任務的執行順序,實現瞭異步的機制。因為同步的行為總是很快完成及時進行瞭界面繪制,界面卡頓的現象也大為改善瞭。

事件循環機制將UI設備的輸入輸出規定為事件,實際上,耗時的行為非常多,但是一般都與IO相關,與IO相關的行為,JavaScript都提供瞭異步行為的代碼。例如,這裡要用的一個加載圖片的實例。

2. 詳論

首先準備一個HTML頁面PromiseTest.html,在這個HTML頁面中加載JS的腳本PromiseTest.js:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="./3rdParty/jquery-3.5.1.js"></script>
    <title>樣例</title>
</head>

<body>
    <div id = "container"> </div>
    <script src="./PromiseTest.js"></script>
</body>

</html>

原生的JS的圖像對象Image,是通過事件的形式來實現圖像的異步加載的:

$(function () {    
    var img = new Image();
    img.onload = function () { 
        $(img).appendTo($('#container'));        
    };
    img.src = "./img.jpg";    
});

為Image的事件句柄onload,添加一個相應函數,當圖像裝載完成之後,就將裝載好的Image添加到HTML頁面的某個div元素子節點下。通過瀏覽器打開這個頁面,會直接顯示對應地址的圖片。

這個JS腳本當然也可以通過Promise來改寫:

$(function () {    
    function getImg(uri){
        return new Promise(function(resolve, reject){
            var img = new Image();
            img.onload = function () {
                resolve(img);
            };
            img.onerror = function () {
                reject(Error("Load Image Error!"));
            }
            img.src = uri;
        });   
    }  
    
    var imgUri = "./img.jpg";
    getImg(imgUri).then(function(img){
        $(img).appendTo($('#container')); 
    }, function(error){
        console.error("Failed!", error);
    })
});

粗看起來,使用Promise,似乎使得程序顯得更加復雜和繁復瞭。但是我們要深入理解Promise機制的內涵,這樣設計並不是為瞭好玩。

  • Promise對象代表的是一個預定要做、但是還未開始做的行為。既然是一個行為,當然得進行計劃,並對行為結果做出規定:如果成功瞭,就執行resolve;如果失敗瞭,就執行reject。一般我們可以定義一個function,並且返回一個Promise對象。
  • 調用返回Promise對象的function,這樣這個想要進行的行為就真正啟動瞭。不過resolve和reject隻是兩個回調函數,那麼就通過then方法來規定成功和失敗對應的真正的處理函數。

可以看到,這樣的設計看起來很繁復,但是卻很像是一個同步行為:規定一個未完成行為對象,行為完成瞭如何處理,行為失敗瞭又如何處理。而這也是Promise的目的:使得異步操作更像是一個同步的行為。

3. 參考

同步(Synchronous)和異步(Asynchronous)

簡述JS單線程異步實現原理

JavaScript 運行機制詳解:再談Event Loop

到此這篇關於JavaScript異步編程之Promise的初步使用的文章就介紹到這瞭,更多相關js Promise使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀:

    None Found