Skip to main content

Promise Basics

Promises/Async/Await: Promise Basics

Can you explain the function and syntax of the Promise object in JavaScript?​

View Answer:
Interview Response: A promise is an object that may produce a single value later in the future: either a resolved value or a reason that it goes unresolved, an error. A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.

Technical Response: The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. A Promise is a proxy for a value not necessarily known when the promise gets created. It enables you to attach handlers with an asynchronous operation to provide a success or failure result. This process lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the method returns a promise to supply the value later. A Promise is in one of three states, including pending, fulfilled, and rejected. The pending state is the initial state, neither fulfilled nor rejected. The fulfilled state means that the operation was ultimately successful, and the rejected state means that there was an apparent failure.

Code Example:

let promise = new Promise(function (resolve, reject) {
  // executor or producer
});

What is the function called that we pass to the newly created promise?​

View Answer:
Interview Response: The executor is the function that gets supplied to a new Promise. The executor launches automatically when a new Promise gets produced. It includes the generating code, which, provided no errors occur, should finally create the outcome. When the attempt gets made, it calls to resolve if it was successful or reject if there was an issue.

Technical Response: The executor is the function that gets supplied to a new Promise. The executor launches automatically when a new Promise gets produced. It contains the code that eventually provides the result. Its arguments resolve and reject JavaScript callbacks, and only the executor gets access to our code. When the executor receives the result, whether early or late, it should call one of these callbacks (resolve, reject). Successful completion with the outcome value gets characterized as resolved. If an error occurs, Reject includes the Error object and executes it. To summarize, the executor is a program that runs automatically and attempts to perform a job. When the attempt gets made, it calls to resolve if it was successful or reject if there was an issue.

Code Example:

let promise = new Promise(function (resolve, reject) {
  // executor or producer
});

Can you name the properties that the promise object returned by the Promise constructor has internally?​

View Answer:
Interview Response: The promise object contains four internal properties, including state and result. The state is initially "pending", then changes to either "fulfilled" when resolve is called or "rejected" when reject is called. The result property is initially undefined, then changes to value when resolve(value) gets called or an error when the reject(error) gets called. So, the executor eventually moves the promise to one of these states.

Code Example:

// Example: RESOLVE
let promise = new Promise(function (resolve, reject) {
  // the function is executed automatically when the promise is constructed

  // after 1 second signal that the job is done with the result "done"
  setTimeout(() => resolve('done'), 1000);
});

// Example: REJECT
let promise = new Promise(function (resolve, reject) {
  // after 1 second signal that the job is finished with an error
  setTimeout(() => reject(new Error('Whoops!')), 1000);
});

What is a promise that is either resolved or rejected called?​

View Answer:
Interview Response: A promise that is either resolved or rejected is called “settled” instead of an initially “pending” promise.

What is the main limitation of a Promise in JavaScript?​

View Answer:
Interview Response: The main limitation is that there can be only a single result or error. The executor should call only one resolve or one reject. Any state change is final; all further resolve calls and `reject` are ignored. The idea is that a job done by the executor may have only one result or an error. Also, resolve/reject excepts only one argument (or none) and ignores additional arguments.

Code Example:

let promise = new Promise(function (resolve, reject) {
  resolve('done');

  reject(new Error('…')); // ignored
  setTimeout(() => resolve('…')); // ignored
});

What are the three subscribing (consumers) methods/functions used in Promises?​

View Answer:
Interview Response: A Promise object is a link between the executor and the consuming functions, which receive the result or error. Consuming functions can be registered using methods .then, .catch and .finally.

Can you explain the function and syntax of the promise then() method/function in JS?​

View Answer:
Interview Response: The then method returns a Promise. It takes up to two arguments in the form of callbacks that handle resolved or rejected promises. The first argument of .then is a function that runs when the promise is `resolved` and receives the result. The second argument of .then is a function that runs when the promise is `rejected` and receives the error.

Technical Response: The then() method returns a Promise. It takes up to two arguments: callback functions for the success and failure cases of the Promise. The first argument of .then is a function that runs when the promise is `resolved` and receives the result. The second argument of .then is a function that runs when the promise is `rejected` and receives the error. If we are interested only in errors, we can use null as the first argument ( .then(null, errorHandlingFunction); ). The then method/function returns a Promise which allows for method chaining.

Code Example:

Syntax: promise.then(onFulfilled[, onRejected]);

let promise = new Promise(function (resolve, reject) {
  setTimeout(() => resolve('done!'), 1000);
});

// resolve runs the first function in .then
promise.then(
  (result) => console.log(result), // shows "done!" after 1 second
  (error) => console.log(error) // doesn't run
);

///////////////////////////////////

let promise2 = new Promise(function (resolve, reject) {
  babab;
});

// error runs the first function in .then
promise2.then(
  (result) => console.log(result), // doesn't run
  (error) => console.log(error.name) // returns ReferenceError
);
note

If we are interested only in errors, we can use null as the first argument ( .then(null, errorHandlingFunction); ). The then method/function returns a Promise which allows for method chaining.

Can you explain the function and syntax of the promise catch() method/function in JS?​

View Answer:
Interview Response: The catch method returns a Promise and deals with rejected cases only, and it behaves the same as calling dot then. This behavior means that you must provide an onRejected function even if you want to fall back to an undefined result.

Technical Response: The catch() method returns a Promise and deals with rejected cases only. It behaves the same as calling Promise.prototype.then(undefined, onRejected) (in fact, calling obj.catch(onRejected) internally calls obj.then(undefined, onRejected)). This means that you have to provide an onRejected function even if you want to fall back to an undefined result value - for example obj.catch(() => {}).

Code Example:

Syntax: promise.catch(onRejected);

let promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('Whoops!')), 1000);
});

// .catch(f) is the same as promise.then(null, f)
promise.catch(alert); // shows "Error: Whoops!" after 1 second

Can you explain the function and syntax of the promise finally() method/function in JS?​

View Answer:
Interview Response: The `finally` method schedules a function for executing when the promise gets settled, either fulfilled or rejected.

Technical Response: Just like there is a 'finally' clause in a standard try {...} catch {...}, there is a 'finally' clause in promises. Finally, the finally() function yields a Promise. The provided callback function gets performed when the promise resolves to be fulfilled or denied. Once the Promise has dealt with, the executing code can determine if the promise gets successfully set to fulfilled or denied. The call.finally(f) is identical to.then(f, f) in that f is always executed when the promise resolves: resolve or reject. Finally, a decent handler for cleaning up, such as halting our loading indicators because they are no longer required, regardless of the outcome.

Code Example:

Syntax: promise.finally(onFinally);

new Promise((resolve, reject) => {
  setTimeout(() => resolve('result'), 2000);
})
  .finally(() => alert('Promise ready'))
  .then((result) => alert(result)); // <-- .then handles the result
note

We use it to perform cleanup tasks once the promise settles, as it always executes irrespective of whether the promise is fulfilled or rejected.

In JavaScript, what are the advantages of promises versus callbacks?​

View Answer:
Interview Response: Promises allow us to do things in the natural order. We can call .then on a Promise as many times as we want. Each time we add a new subscribing function to the “subscription list”, it returns a new promise. This approach allows us to chain our promises without the limitations of a callback. We can immediately see a few benefits over the callback-based pattern. So, promises give us better code flow and flexibility.

Code Example:

Syntax: promise.finally(onFinally);

new Promise((resolve, reject) => {
  setTimeout(() => resolve('result'), 2000);
})
  .finally(() => alert('Promise ready'))
  .then((result) => alert(result)); // <-- .then handles the result