JavaScript Promises: Your Ultimate Guide!

Written by
Dwi Nugroho
Dwi Nugroho
Published on
Comments
JavaScript Promises: Your Ultimate Guide!

JavaScript possesses a unique feature that sets it apart from other high-level programming languages – its inherent asynchronicity. This quality allows seamless execution of multiple tasks without causing interference. While other languages traditionally rely on "threading" to achieve this, JavaScript's non-blocking nature eliminates the need for such complex measures, replacing them with a concept known as Promise.

Understanding Promises 🤔

In essence, a Promise is a JavaScript object capable of producing a value at some point in the future. Its versatility shines in various scenarios, with one of the most common use cases being fetching data from an API, a frequent requirement in dynamic web applications.

console.log(fetch("https://jsonplaceholder.com/posts/1"))

Upon executing this code, the result is a Promise in the "pending" state, reflecting the uncertainty of when data will arrive, contingent on the user's internet connection. To handle this uncertainty, we employ a 'then' handler to take action once the data is available.

fetch("https://jsonplaceholder.typicode.com/posts/1")
	.then((response) => {
		console.log("status:", response.statusText)
	})

This snippet showcases the 'then' handler, providing a clear response when the data is successfully fetched.

Error Handling with Promises 🛑

JavaScript's Promise has three states: pending, rejected, and fulfilled. Understanding these states is crucial for effective error handling, especially when dealing with potential issues during data fetching.

fetch("https://jsonplaceholder.typicode.com/posts/1")
	.then((response) => {
		console.log(response.ok)
	})
	.catch((err) => {
		console.error("Failed to fetch post!")
	})

The 'catch' method aids in handling errors that may arise, such as interrupted internet connections or unexpected server errors, ensuring a more robust application.

Creating Your Own Promise ✨

While often unnecessary due to the availability of Promises in JavaScript APIs and third-party libraries, creating your Promise is achievable using the Promise constructor.

const myPromise = new Promise((resolve, reject) => {
	resolve("Success!")
})
 
myPromise.then((data) => console.log(data))

This snippet illustrates the creation of a custom Promise, emphasizing the resolve and reject functions, providing flexibility in handling different scenarios.

Chaining Promises 🔄

Chaining promises enhances code readability and simplifies the handling of asynchronous operations. Fetching and transforming JSON data serves as a prime example.

fetch("https://jsonplaceholder.typicode.com/posts/1")
	.then((response) => response.json())
	.then((data) => {
		console.log(data)
	})

By chaining 'then' methods, the code becomes more concise, ensuring a clean and efficient flow.

Async & Await 🎉

Introducing async and await syntax further refines asynchronous code handling, offering cleaner and more readable alternatives to traditional 'then' and 'catch' methods.

async function fetchPosts() {
	try {
		const response = await fetch("https://jsonplaceholder.typicode.com/posts/1")
		const data = await response.json()
		console.log(data)
	} catch (err) {
		console.error("Failed to fetch post!")
	}
}

Utilizing async/await flattens the code hierarchy, providing a more intuitive structure while simplifying error handling in a single code block. Embrace the power of asynchronous JavaScript for seamless and efficient web development! 🌐✨

Edit on GitHub
Gradient background
Gradient background
Gradient background