avatar

Welcome!

Asynchronous Object - Promise

       
index

Basic Usage of Promise

When you want to do asynchronous operations, like loading a picture from netowrk, a Promise object is your tatget. Promise has three states: Pending, Fulfilled, and Rejected.
  • Pending state is the initial state wich is waiting for response.
  • Fulfilled state indicates the asynchronous operation run success.
  • Rejected state is opposit from Fulfilled, means the operation falied.
Here is an image for illustration.
promise
fig 1. basic promise

Before any function call of resolve or reject, A modifiled example code form mozilla developer network 

    /******************************/            
    /* javascript for client site */
    /******************************/ 

    "use strict";

    // to show that setTimeout function will run after the script reach the end
    setTimeout(function(){
        console.log("setTimeout run after 0 second delay");
    },0)

    console.log("script start");

    var test = new Promise(function(resolve, reject){
        console.log("promise: enter construction");
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function(){
            if (this.readyState == 4 && this.status == 200) {
                console.log("promise: before resolve");
                var temp = this.responseText;
                resolve(temp);
                console.log("promise: after resolve");
            }
        }
        xhttp.open("GET", "http://localhost:8080/server.php", true);
        xhttp.send();
        console.log("promise: leave construction");
    })

    test.then(function(para){
        console.log("promise: then " + 'value: '+para);
    },function(para){
        console.log("promise: catch");
    })

    setTimeout(function(){
        console.log("setTimeout run after 2 second delay");
    },2000)

    setTimeout(function(){
        console.log("setTimeout run after 5 second delay");
    },5000)

    console.log("script end")
        

    /****************************/
    /* php for server site      */
    /* simulate network latency */
    /****************************/

    function jsPromsieTest(){
        sleep(3);
        echo "message return after 3 second called";
    }
    
    jsPromsieTest();
The console log output result 

    script start
    promise: enter executor
    promise: leave executor
    script end
    setTimeout run after 0 second delay
    setTimeout run after 2 second delay
    promise: before resolve
    promise: after resolve
    promise: then value: message return after 3 second called
    setTimeout run after 5 second delay

Understanding Promise

During the Promise construction (new a Promise Object), its constructor will set its attribute [[PromiseState]] to pending. Then after few steps, its run the pass-in function (executor).

On the upper example will run 
  
    console.log("promise: enter construction"); 
    ......
    console.log("promise: leave construction");
executor contains two parameters: resolve, and reject, and both parameters are functions object. 

    ......
    test.then(function(para){
    ......
test.then() trigger PerformPromiseThen() which will put the pass in function of then to [[PromiseFulfillReactions]] until server.php pass back message (trigger AsyncFunctionAwait())

As the sample ajax code above, when server.php has pass back message, it will call resolve(), then trigger AsyncFunctionAwait() to call PerformPromiseThen(), PerformPromiseThen() will create PromiseReaction records, and put it to PromiseJobs queue (microtasks queue).

If there is no execution context running and the execution context stack is empty, PromiseJobs queue will pop PromiseReaction records and run. In this case is perform function 

    function(para){
        console.log("promise: then " + 'value: '+para);
    }

References