Javascript Promises

What is Promise in Javascript: An Overview

• pending: Initial state, neither fulfilled nor rejected.
• fulfilled: The operation completed successfully.
• rejected: The operation failed.

How Javascript Promises Work

Promise(executor)

function(resolve, reject)

let promise = new Promise(function(resolve, reject) {
  // executor (the producing code)
});

Asynchronous Programming with Javascript Promises

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000); 
})
.then(result => {
  console.log(result); // 1
  return result * 2;
})
.then(result => {
  console.log(result); // 2
  return result * 3;
})

Exploring Javascript Promise Methods

Commonly Used Javascript Promise Methods

promise.then(
  function(result) { /* handle successful resolution */ }, 
  function(error) { /* handle error */ }
);

promise.catch(
  function(error) { /* handle error */ }
);

promise.finally(
  function() { /* code to run after the Promise is settled */ }
);

Implementing Javascript Promise Methods in Programming

let imgLoad = new Promise(function(resolve, reject) {
  let img = new Image();
  img.src = 'path/to/image.jpg';

  img.onload = function() {
    resolve(img);
  };

  img.onerror = function() {
    reject('Error loading image.');
  };
});

imgLoad.then(
  function(img) { 
    document.body.append(img);
  },
  function(error) {
    console.log(error);
  }
);

imgLoad.then(
  function(img) { 
    document.body.append(img);
  }
).catch(function(error) {
  console.log('Error occurred.', error);
});

Javascript Promise Examples: A Guided Walkthrough

Simple Javascript Promise Example for Beginners

let hasEnoughMoney = new Promise(function(resolve, reject) {
  let money = 500;  // User has £500
  let price = 400;  // The item costs £400

  if(money >= price) {
    resolve('You can buy the item!');
  } else {
    reject('Sorry, but you cannot afford this item.');
  }
});

// Utilising the Promise object
hasEnoughMoney.then(function(message) {
  console.log(message);  // Logs "You can buy the item!"
}).catch(function(error) {
  console.log(error);  // Would log "Sorry, but you cannot afford this item." if user didn't have enough money
});

Advanced Javascript Promise Example for More Experienced Learners

function waitAndLog(seconds) {
  return new Promise(function(resolve, reject) {
    if (seconds < 1 || seconds > 5) {
      reject('Input must be between 1 and 5.');
    } else {
      setTimeout(function() {
        resolve(`Waited for ${seconds} seconds.`);
      }, seconds * 1000);
    }
  });
}

waitAndLog(2)
  .then(function(message) {
    console.log(message);
    return waitAndLog(3);
  })
  .then(function(message) {
    console.log(message);
    return waitAndLog(4);
  })
  .then(function(message) {
    console.log(message);
  })
  .catch(function(error) {
    console.error(error);
  });

Learning Javascript Promise Chaining

What is a Javascript Promise Chain?

Chaining Multiple Javascript Promises: Step-by-step Guide

// Our hypothetical asynchronous function to simulate reading a book.
function readBook(bookName) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(`Finished reading ${bookName}`);
    }, Math.floor(Math.random() * 5000) + 1000);  // Reading takes 1-5 seconds
  });
}

// Now, we chain the reading process
readBook('Book 1')
  .then(message => {
    console.log(message);
    return readBook('Book 2');
  })
  .then(message => {
    console.log(message);
    return readBook('Book 3');
  })
  .then(message => {
    console.log(message);
  })
  .catch(error => {
    console.log(`Error occurred: ${error}`);
  });

Deep Dive into Javascript Await Promise

How Does 'Await' Affect Javascript Promises?

• 'await' causes async function execution to pause and wait for Promise resolution.
• 'await' can only be used inside an async function.
• If the Promise fulfils, the 'await' keyword retrieves the resolved value.
• If the Promise rejects, it throws an error which can be caught using 'catch'.

Using 'Await' in Javascript Promise: An Example

async function fetchShoesInOrder(ids) {
  for (let id of ids) {
    try {
      const shoe = await getShoeByID(id);  // Pauses until promise settles
      console.log(`Fetched shoe with ID ${id}: ${shoe}`);
    } catch(error) {
      console.log(`Error: Could not fetch the shoe with ID ${id}: ${error}`);
    }
  }
}