JS Tutorials | Promises

JavaScript Tutorial

Promises

JavaScript promises are another concept that some find difficult to understand. The first thing to understand about this concept is how JavaScript executes. JavaScript is single threaded which means it can only do one thing at a time. If a particular task takes a long while like writing a big file to disk or making an http request, a promise can be used to prevent JavaScript execution from stopping and waiting on that long task to complete. Promises basically say "I'm going to go attempt this task that will take a while and might fail, don't wait on me, but I promise I'll call you back to let you know if I succeeded or not." Promises have a typical syntax which we'll cover in examples but they're basically made up of a function that fires if the task succeeds and can return a result or a function that fires if the task fails that returns an error. The promise can only return with success or error and can only return once. Subsequent returns are ignored.

Example 1 | Understanding Asynchronous Code

The following code will demonstrate how a promise can be created and called before another function but might not return before the other function executes. This is called asynchronous execution because the promise was called first but the execution didn't wait on it to complete, it moved on and only executed the promise after promise returns or "fulfills" its promise to return. Click on the following code to run it.

var promise = new Promise((success)=>{
    setTimeout(()=>{
        success("Promise returned");
    },1000);
});

promise.then((successResult)=>{
    alert(successResult);
});

alert("Other function fired");

Example 2 | Understanding promise.then()

After a promise has been created with the constructor and stored as a variable, it is used with the function promise.then(). The then function allows you to decide what to do once the promise completes its task. Think of it like do this task THEN do this with the result. The then function takes two functions as arguments, the first for if the promise succeeds (aka "resolves") and the second for if the promise fails (aka "rejects"). This example will randomly decide to succeed or fail to demonstrate each argument function of the then function. Click on the code below to run it.

var promise = new Promise((success, failure)=>{
    if(Math.random()>=0.5){
        success();
    }else{
        failure();
    }
});

promise.then(()=>{
    alert("Task succeeded");
},()=>{
    alert("Task failed"); 
});

Example 3 | Loading an image with a promise.

This example will load my profile picture with a promise to let us know if it worked or not. It will return and display the image if it succeeded and alert an error if not. Notice the constructor returns the image object in the success function to be used in the promise.then() function. Please be patient the image might take a minute to load. Click on the code below to run it.

var promise = new Promise((success, failure)=>{
    var img = document.createElement("img");
    img.src = "https://api.sololearn.com/Uploads/Avatars/3294957.jpg";
    
    img.onload = ()=>success(img);
    img.onerror = ()=>failure("Oops something went wrong!");
});

promise.then((successResult)=>{
    displayPic(successResult);
},(err)=>{
    alert(err); 
});

function displayPic(pic){
    pic.className = "popup-img";
    pic.addEventListener("click", (e)=>{
        e.target.parentNode.removeChild(e.target);
    });
    document.body.append(pic);
}

I hope this helps! Let me know in the comments if you have any questions! Good luck!

JS Tutorial | Promises