Promise Me JavaScript, Promise Me..

Introduction

In web development, asynchronous (aka, async) operation, such as API calling is inevitable for developer to not work with, and the basic foundation knowledge we need to know is Promise.

Promise is a special JavaScript object that produces a value after async operation completes successfully, or even an error, such as timeout, connection error, wrong API URL, and so on.

This article is a simple explanation of Promise.

Creating a Promise Object

Below is the example how to create a Promise Object.

let promise = new Promise(function(resolve, reject){
	// perform asynchronous computation
	resolve("Give result")
})

// or using arrow function

let promiseTwo = new Promise((resolve, reject) => {
	resolve("Give result")
})

// or using Promise shortcut function

let promiseThree = new Promise.resolve("Give result")

Promise Handler

In order to get the asynchronous computation result, Promise needs to use .then and return the result. Let's use above example and below code describes how to use .then method.

let promise = new Promise(function (resolve, reject) {
	// return message after 1 sec
	setTimeout(function () {
		resolve("Give result after 1 sec");
	}, 1000); 
});

promise.then((res) => {
  console.log(res); // output: "Give result after 1 sec"
});

Maybe you already guessed that if the Promise object has resolve property, by looking at the above parameter, we should also have reject property. You are definitely right !

Moreover, those arguments (resolve and reject) are callbacks provided by JavaScript.

• resolve(value) - return the value object if async computation run successfully.
• reject(error) return the error object if an error has occurred.

Let's expand the above example with reject callback.

let promise = new Promise(function(resolve, reject){
  reject("Error happened")
})

promise.then(res => {
   console.log(res);
}).catch(err => {
   // reject will be caught by .catch
   console.log(err); // output: "Error happened"
})

Deep Dive into Promise Constructor

These below are all Promise object returns from new Promise constructor:

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

1. state — initial value is "pending",

   • then changes to "fulfilled" when resolve is called,
   • or changes to "rejected" when reject is called.

2. result — initial value is undefined,

   • then changes to value when resolve(value) is called,
   • or changes to error when reject(error) is called.

Important Notes: Promise should execute only one, either resolve or reject. Once one state is changed, we can't change to other state. Any further execution to resolve or reject will be ignored.

let promise = new Promise(function(resolve, reject){
  reject("Error happened!")
  
  resolve("Change my mind, error didn't happen") // will be ignored
})

promise.then(res => {
    console.log('resolve: ', res);
}).catch(err => {
    console.log('rejected:', err); // output: "rejected: Error happened!"
})

Conclusion

Promise in JavaScript performs asynchronous computation and it requires resolve or reject property to return statement or value. In order to get the value from our Promise, we can use then and catch method for resolved and rejected value respectively.