A promise represents a value that is unknown now that may become known in the future, in other words an asynchronous value. Think of it like a ride hailing app. When you request a ride, the driver makes a promise to pick you up. While you are waiting, the ride is pending. In the future if all goes according to the plan, the driver will resolve to pick you up then take you somewhere at which point your ride has been fulfilled. But, in some cases the driver might reject your ride in which case you will need to catch one somewhere else. Either way the original request is now finally settled.
As a developer, you might want to create a promise to represent an asynchronous value. But, more often than that, you will be consuming promises to use the result of an asynchronous operation in your code.
// create
const ride = new Promise((resolve, reject) => {
if (arrived) {
resolve('driver arrived 🚗');
} else {
reject('driver bailed 😢');
}
});
// consume
ride
.then((value) => {
console.log(value);
})
.catch((error) => {
console.log(error);
})
.finally(() => {
console.log('all settled');
});
When constructed, a promise starts off in a pending state. It is your job to define a callback function called an executor that defines when to resolve or reject the promise. This is where you would kick off your asynchronous work. On the other side, the consumer of the promise calls its then
method. It is waiting for the asynchronous value to be fulfilled. When that happens, it will execute the function – the argument on .then
method – with the value as its argument. We fulfill the promise by calling resolve
. But, there is always the possibility of an exception. In that case we can reject
the promise and send the error back down to the consumer which can use the catch
method with an entirely different function for handling exceptions. Also, if you just want to run some codes no matter what, you can use finally
to handle both possibilities. All of these methods return promises which means they can be chained together to handle multiple asynchronous operations in a row.
promise
.then(() => {})
.then(() => {})
.then(() => {})
.catch(() => {})
- How to make strongly-typed React components
TypeScript helps developers to improve their productivity and prevent them from producing bugs.
Published on Mar 10, 2021 · 2 min read
- React Native over-the-air app update with CodePush
CodePush is a tool developed by Microsoft which allows developers to quickly and easily manage and update React Native JavaScript bundles over the air.
Published on Nov 1, 2020 · 7 min read
- Building a simple login form in React Native using React Hook Form
A short step-by-step tutorial about how to build a simple login form in React Native using React Hook Form.
Published on Oct 6, 2020 · 9 min read
- Building floating logo bubbles on Stripe.com using React Hooks
In this tutorial, we are going to clone animating logo bubbles from Stripe.com using React Hooks.
Published on Aug 11, 2020 · 9 min read
- Building custom React Hooks to fetch data from Firebase Firestore
In this article, I want to share my experience of building custom React Hooks to fetch data from Firebase Firestore.
Published on Aug 5, 2020 · 5 min read
- Building a simple login form with Material UI and React Hook Form
In this article, I will give a short step-by-step tutorial about how to build a simple login form with Material UI and React Hook Form.
Published on Jul 23, 2020 · 7 min read
- Introduction to React Hooks
Hooks solve a wide variety of seemingly unconnected problems in React. Whether you're new to React or use it daily, you might recognise some of these problems.
Published on Jul 20, 2020 · 3 min read
- N+1 problem in GraphQL
The n+1 problem occurs because GraphQL executes a separate function – called resolver – for each field.
Published on Jul 17, 2020 · 2 min read
- GraphQL vs REST
GraphQL has been introduced as a revolutionary alternative to REST APIs. However, it has its pros and cons.
Published on Jul 16, 2020 · 3 min read
- Data fetching in Next.js 9.3+
There are two forms of pre-rendering: Static Generation and Server-side Rendering.
Published on Jul 15, 2020 · 6 min read
- When should we consider using third-party libraries?
The most crucial advantage of using third-party libraries is that it helps you to save time because you do not need to develop the functionality that the library gives.
Published on Jul 13, 2020 · 4 min read
- Step-by-step guidelines to implement Material UI in Next.js 2020
In this article, I want to share how to integrate Material UI in Next.js applications. We will build a very basic website using Material UI and Next.js.
Published on Jul 11, 2020 · 4 min read