Promise syntax

A promise is an object that is created by passing in a function that accepts two callbacks. The first callback is used to indicate a successful response, and the second callback is used to indicate an error response. Consider the following function definition:

function fnDelayedPromise ( 
    resolve: () => void,  
    reject : () => void)  
    { 
        function afterTimeout() { 
             resolve(); 
        } 
         
        setTimeout( afterTimeout, 2000); 
    } 

Here, we have defined a function named fnDelayedPromise that takes two functions as arguments. These functions are named resolve and reject, and they both return a void. Within the body of the fnDelayedPromise function, we are again calling setTimeout (on the last line of the function) to wait for 2 seconds before calling the resolve callback function.

We can now use this function to construct a promise object, as follows:

function delayedResponsePromise() : Promise<void> { 
    return new Promise<void>( 
        fnDelayedPromise 
    ); 
}

Here, we have created a function named delayedResponsePromise that returns a new Promise<void> object. Within the body of the function, we are simply creating and returning a new promise object, and using our earlier function definition named fnDelayedPromise as the only argument within its constructor. Note that type void, which is used to create a promise, is using generic syntax (new Promise<void>) to indicate some information on the return type of the promise. We will discuss the use of the generic <void> syntax a little later, when we explore how to return values from promises.

While this syntax may seem a little convoluted, in general practice, these two function definitions are combined in a single code block. The purpose of the previous two snippets has been to highlight two important concepts. Firstly, to use promises, you must return a new promise object. Secondly, a promise object is constructed with a function that takes two callback arguments.

Let's take a look at how these two steps are combined in general practice, as follows:

function delayedPromise() : Promise<void> { 
    return new Promise<void>  
    (  
        (   resolve : () => void,  
            reject: () => void  
        ) => { 
            function afterTimeout() { 
                resolve(); 
            } 
             
            setTimeout( afterTimeout, 1000); 
        }  
    ); 
} 

Here, we have a function named delayedPromise that returns a new Promise<void> object. The first line of this function constructs the new Promise object, and passes in an anonymous function definition that takes two callback functions, named resolve and reject. The body of the code is then defined after the fat arrow =>, and is enclosed with matching curly braces { and }. The body of the code is defining a function named afterTimeout, which will be called after a 1 second timeout. Note that the afterTimeout function is invoking the resolve function callback.

Note that this code snippet has been carefully formatted to clearly show the matching braces ( and ), and the matching curly braces { and }. Remember that in order to use promises, we must construct and return a new Promise object, and the constructor of a Promise object takes a function (or anonymous function) with two callback arguments.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.224.95.38