JavaScript Promises: Resolve & Reject Code Examples

Promises are a broad topic in JavaScript, so we'll cover the basics of what you'll need to know to get started.

In this article, we'll go over how to create our own JavaScript Promises, the difference between callbacks and Promises, and how to handle resolve, reject, and chaining events.

What is a Promise?

A Promise is a guarantee that a certain operation will be performed sometime in the future.

A single Promise has two possible outcomes: either it will be kept, or it won't. Or, in a programmatic sense, it's a JavaScript object used to make an asynchronous call that will either be resolved or rejected.

JavaScript Promises work in the same way, and we'll cover this shortly.

Promise States

A Promise in JavaScript is an object consisting of three different states:

• Pending: The initial state of the Promise. This is the first state of the Promise after it has been initiated.
• Resolved: The Promise has completed successfully.
• Rejected: The Promise has failed.

The Difference Between a Callback and a Promise

Callbacks tell the executing function what to do when an asynchronous task has been completed.

Callbacks are great for single-use processes where a small amount of functionality may be executed after a success or failure event. However, if you require multiple asynchronous calls to complete a list of tasks one after another, a method called chaining is involved and generally results in some dirty code and an end-result as something called callback hell.

Here's some code to illustrate what I mean:

request1(function(result) {
	request2(function(result) {
		request3(function(result) {
			...
		}, failure_callback);
	}, failure_callback);
}, failure_callback);

request1 fires first. On success, request2 fires, then request3.

This doesn't look too bad at first glance, but imagine adding more complex functionality to these callbacks. It's very easy to complicate functionality within callbacks and can eventually make your code hard to understand and even unreadable.

Enter JavaScript Promises

Promises, on the other hand, instruct the executing function to return an object to you. You, in turn, instruct the Promise of what to do when the asynchronous task has been completed.

It's a much cleaner process and can look something like this:

my_request()
	.then(function(result) {
		return request2(result);
	})
	.then(function(result) {
		return request3(result);
	})
	.then(function(result) {
		...
	})
	.catch(failure_callback);

How to Create a Promise

Let's walk through creating a Promise by using a constructor:

var my_promise = new Promise((resolve, reject) => {
	let condition = true;

	if (condition) {
		resolve("Success");
	} else {
		reject("Failure");
	}
});

Here, our new Promise object is created with two parameters, resolve() for successful results and reject() for failures.

The value that's passed within the resolve() and reject() methods is what will be returned to the executing function.

Using then() for Resolved Promises

The then() method is called after a Promise is resolved. From there, you can decide what you want to do with that resolved Promise.

As an example, we can log a message to the console confirming that the Promise has successfully completed:

my_promise.then(function(result) {
	console.log(result);
});

Using catch() for Rejected Promises

Not all Promises will be fulfilled. In the case where a Promise is rejected, or failed, we can use the catch() method directly after all then() methods for error handling:

my_promise.then(function(result) {
	console.log(result);
}).catch(function(err) {
	console.error(err);
});

Conclusion

This article is only an introduction to Promises. Understanding how they work takes time and practice, but I hope this helps you get your feet wet into the broader scope of their functionality.