JavaScript: Promise Object

Understanding Promise

Structure
Promise consists of 2 parts:
  • new Promise(): A promise something will be fulfilled in the future. 2 possible outcome:
    • Promise is fulfilled
    • Promise is failed
  • .then(): Future actions to take for each possible outcome:
    • Function for fulfilled promise
    • Function for failed promise
Syntax condensed
const promiseName = new Promise(promiseFunction)

promiseName.then(successFunction, failedFunction)
Functions details
function promiseFunction ((success, failed) => {
    Success condition {return success(successValue)}
    Failed condition  {return failed(failedValue)}
})

function successFunction ((successParam) => {
    Actions for succesful promise
    successParam value = successValue 
})

function failedFunction ((errorParam) => {
    Actions for failed promise
    errorParam value = failedValue  
})
Syntax with functions extended
promiseName = new Promise((success, failed) => {
    Success condition {return success(successValue)}
    Failed condition  {return failed(failedValue)}
})

promiseName.then((successParam) => { 
    Actions for succesful promise
    successParam value = successValue 
}, (errorParam) => {
    Actions for failed promise
    errorParam value = failedValue 
})
Example: Promise to learn promise
Given: failed promise
var understandPromise = false;
The promise
const promiseToLearnPromise = new Promise((success, failed) => {
    if (understandPromise) {
        return success("Done!");
    } else {
        return failed("Not yet...");
    }
});
The then actions
promiseToLearnPromise.then((done) => {
    console.log(done);
    console.log("Next: Learn setTimeout");
}, (notyet) => {
    console.log(notyet);
    console.log("Keep learning Promise")
})
Result
// Not yet...
// Keep learning Promise
Given: fulfilled promise. The result becomes:
var understandPromise = true;

Re-runnning code
// Done!
// Next: Learn setTimeout

Tutorial video example

Promise: Use watching tutorial video to the end
From: Web Dev Simplified (YouTube): JavaScript Promises In 10 Minutes
  • Success if: User watches to the end.
  • Failed if:
    • User left,
    • User watching cat meme.
Using callbacks
function watchTutorialCallback(callback, errorCallback) {
    if (userLeft) {
        errorCallback({
            name: "User Left",
            message: ":("
        });
    } else if (userWatchingCatMeme) {
        errorCallback({
            name:"User Watching Cat Meme",
            message: "Cat over learning :("
        });
    } else {
        callback("Thumbs up and Subscribe")
    };
};
User ends up watching to the end
let userLeft = false;
let userWatchingCatMeme = false;

watchTutorialCallback((message) => {
    console.log("Success: " + message);
}, (error) => {
    console.log(error.name + ": " + error.message);
});

// Success: Thumbs up and Subscribe
If user left early
userLeft = true;
userWatchingCatMeme = false;

// Call the function, and result is:
// User Left: :(
If user watches cat meme instead
userLeft = false;
userWatchingCatMeme = true;

// Call the function, and result is:
// User Watching Cat Meme: Cat over learning :(
Using Promise function
function watchTutorialPromise() {
    return new Promise((resolve, reject) => {
        if (userLeft) {
            reject({
                name: "User Left",
                message: ":("
            });
        } else if (userWatchingCatMeme) {
            reject({
                name:"User Watching Cat Meme",
                message: "Cat over learning :("
            });
        } else {
            resolve("Thumbs up and Subscribe")
        };
    });
};
The then and catch function
watchTutorialPromise().then((message) => {
    console.log("Success: " + message);
}).catch((error) => {
    console.log(error.name + ": " + error.message);
});
User ends up watching to the end
userLeft = false;
userWatchingCatMeme = false;

// Call the function, and result is:
// Success: Thumbs up and Subscribe
If user left early
userLeft = true;
userWatchingCatMeme = false;

// Call the function, and result is:
// User Left: :(
If user watches cat meme instead
userLeft = false;
userWatchingCatMeme = true;

// Call the function, and result is:
// User Watching Cat Meme: Cat over learning :(

Multiple promises

Promise.all() and Promise.race()

Multiple promises
Running multiple promises is possible.
Success/failed trigger options
  • All success: Promise.all()
    • All promises must be fulfilled to be succesful
      • Success parameter passed is an array of individual success promise value
    • It's not succesful as soon as the first error is found
      • Error parameter passed is the first failed promise value
  • Any success/failed: Promise.race()
    • Any 1 of the promises produce outcome, whether it's succesfull or failed:
      • Success/failed parameter passed is that first success/failed value
Syntax
The promises are still written normal way individually.
const promise1 = new Promise(promiseFunction1);
const promise2 = new Promise(promiseFunction2);
const promise3 = new Promise(promiseFunction3);
The then statement becoming:
Promise.all(promiseArray).then(successFunction);
or
Promise.race(promiseArray).then(successFunction);
Array extended:
Promise.all([promise1, promise2, promise3]).then(successFunction);
or
Promise.race([promise1, promise2, promise3]).then(successFunction);
Promise.all()
Example: Recording 3 videos. All 3 must be recorded.
Scenario: All video recorded
const record1 = new Promise((resolve,reject) => {resolve("Video 1 Recorded")});
const record2 = new Promise((resolve,reject) => {resolve("Video 2 Recorded")});
const record3 = new Promise((resolve,reject) => {resolve("Video 3 Recorded")});

Promise.all([record1, record2, record3]).then((messages) => {
    console.log("Recording succesful. All videos recorded.");
    console.log(messages);
}, (error) => {
    console.log("Recording failed. First failure found:");
    console.log(error);
});

// Recording succesful. All videos recorded.
// (3) ['Video 1 Recorded', 'Video 2 Recorded', 'Video 3 Recorded']
Scenario: 1 of the video not recorded:
const record1 = new Promise((resolve,reject) => {resolve("Video 1 Recorded")});
const record2 = new Promise((resolve,reject) => {reject("Video 2 Not Recorded")});
const record3 = new Promise((resolve,reject) => {resolve("Video 3 Recorded")});

Running code
// Recording failed. First failure found:
// Video 2 Not Recorded
Scenario: none of the videos recorded:
const record1 = new Promise((resolve,reject) => {reject("Video 1 Not Recorded")});
const record2 = new Promise((resolve,reject) => {reject("Video 2 Not Recorded")});
const record3 = new Promise((resolve,reject) => {reject("Video 3 Not Recorded")});

Running code
// Recording failed. First failure found:
// Video 1 Not Recorded
Promise.race()
Example: Recording 3 videos. Only need 1 to be recorded.
Scenario: All videos recorded, but 2 resolved first.
const record1 = new Promise((resolve,reject) => {setTimeout(resolve, 500, "Video 1 Recorded")});
const record2 = new Promise((resolve,reject) => {setTimeout(resolve, 100, "Video 2 Recorded")});
const record3 = new Promise((resolve,reject) => {setTimeout(resolve, 800, "Video 3 Recorded")});

Promise.race([record1, record2, record3]).then((message) => {
    console.log("First outcome: Success!");
    console.log(message);
}, (error) => {
    console.log("First outcome: Failure!");
    console.log(error);
});

// First outcome: Success!
// Video 2 Recorded
Scenario: Some recorded, some failed. But 2 failure comes first
const record1 = new Promise((resolve,reject) => {setTimeout(resolve, 500, "Video 1 Recorded")});
const record2 = new Promise((resolve,reject) => {setTimeout(reject, 100, "Video 2 Not Recorded")});
const record3 = new Promise((resolve,reject) => {setTimeout(resolve, 800, "Video 3 Recorded")});

Running code
// First outcome: Failure!
// Video 2 Not Recorded
Scenario: Some recorded, some failed. But 2 failure comes first
const record1 = new Promise((resolve,reject) => {setTimeout(resolve, 500, "Video 1 Recorded")});
const record2 = new Promise((resolve,reject) => {setTimeout(reject, 100, "Video 2 Not Recorded")});
const record3 = new Promise((resolve,reject) => {setTimeout(resolve, 800, "Video 3 Recorded")});

Running code
// First outcome: Failure!
// Video 2 Not Recorded

Timer using setTimeout() and Promise

Use setTimeout to delay the success result
const wait = (time) => new Promise((success) => setTimeout(success, time));
wait(3000).then(() => console.log("Bip Bip Bip"));

References