Horje
How to Implement a Custom Promise in JavaScript ?

A custom Promise in JavaScript encapsulates asynchronous operations. It takes two parameters, resolves and rejects functions, and executes an async task. Resolve is called on success with the result, while reject is called on failure with an error.

Using Class Syntax

In this approach, we are creating a custom promise using Class Syntax. The class encapsulates asynchronous operations, handling resolution, rejection, and chaining. It provides a concise and organized structure for promise implementation in JavaScript.

Syntax:

class Name {
constructor(var) {
this.var = var;
}
}

The Name class has a constructor that initializes an instance with a property var. This property stores a value passed during object creation, encapsulating it within the class instance.

Example: To demonstrate the CustomPromise class implements a basic promise with asynchronous resolution. The then method creates and returns a new promise, handling fulfilment or rejection asynchronously.

Javascript

class CustomPromise {
  constructor(executor) {
    this.state = "pending";
    this.value = null;
    this.handlers = [];
 
    const resolve = (result) => {
      if (this.state === "pending") {
        this.state = "fulfilled";
        this.value = result;
        this.handlers.forEach((handler) => {
          handler.onFulfilled(result);
        });
      }
    };
 
    const reject = (error) => {
      if (this.state === "pending") {
        this.state = "rejected";
        this.value = error;
        this.handlers.forEach((handler) => {
          handler.onRejected(error);
        });
      }
    };
 
    executor(resolve, reject);
  }
 
  then(onFulfilled, onRejected) {
    return new CustomPromise((resolve, reject) => {
      if (this.state === "fulfilled") {
        setTimeout(() => {
          try {
            resolve(onFulfilled(this.value));
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === "rejected") {
        setTimeout(() => {
          try {
            reject(onRejected(this.value));
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.handlers.push({ onFulfilled, onRejected });
      }
    });
  }
}
 
const promise = new CustomPromise((resolve, reject) => {
  setTimeout(() => resolve("Hello, GeeksforGeeks"), 500);
});
 
promise.then((result) => console.log(result));

Output

Hello, GeeksforGeeks

Using Factory Function

A factory function is a function that returns an object or a function. In the context of a custom promise, a factory function creates and returns a custom promise object with specified behaviours.

Syntax:

function createRobot(name) {
return {
name: name,
talk: function () {
console.log('My name is '
+ name + ', the robot.');
}
};
}

Example: This createCustomPromise factory function generates a custom promise-like object with `then`, `catch`, and `finally` methods.

Javascript

function createCustomPromise(delay, shouldResolve) {
    return {
        then(onFulfilled, onRejected) {
            return createCustomPromiseInternal(
                delay,
                shouldResolve,
                onFulfilled,
                onRejected
            );
        },
 
        catch(onRejected) {
            return this.then(null, onRejected);
        },
 
        finally(onFinally) {
            return this.then(
                (result) => {
                    onFinally();
                    return result;
                },
                (error) => {
                    onFinally();
                    throw error;
                }
            );
        },
    };
}
 
function createCustomPromiseInternal(
    delay,
    shouldResolve,
    onFulfilled,
    onRejected
) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (shouldResolve) {
                try {
                    resolve(
                        onFulfilled &&
                        onFulfilled(`
            Promise resolved successfully
            `)
                    );
                } catch (error) {
                    reject(error);
                }
            } else {
                try {
                    reject(onRejected && onRejected("Promise rejected"));
                } catch (error) {
                    reject(error);
                }
            }
        }, delay);
    });
}
 
const promise = createCustomPromise(500, true);
 
promise
    .then((result) => console.log(result))
    .catch((error) => console.error(error))
    .finally(() => console.log("Finally block executed"));

Output:

Promise resolved successfully
Finally bloxk executed



Reffered: https://www.geeksforgeeks.org


Geeks Premier League

Related
How to Append an Object as a Key Value in an Existing Object in JavaScript ? How to Append an Object as a Key Value in an Existing Object in JavaScript ?
How To Fix Valueerror Exceptions In Python How To Fix Valueerror Exceptions In Python
How to Read the Payload from Browser-Network Tab and Use it in Postman as Header in Another Request How to Read the Payload from Browser-Network Tab and Use it in Postman as Header in Another Request
How to handle forms in React ? How to handle forms in React ?
Aspect Ratio Calculator using React Aspect Ratio Calculator using React

Type:
Geek
Category:
Coding
Sub Category:
Tutorial
Uploaded by:
Admin
Views:
13