Promise is a solution to asynchronous programming that makes more sense and is more powerful than traditional solutions — callback functions and events. It was first proposed and implemented by the community, and ES6 has written it into the language standard, unifying usage, and providing Promise objects natively.

Promise objects have two characteristics:
  • The status of an object is not affected. The Promise object represents an asynchronous operation with three states:

Pending: Indicates the initial state, not the success or failure state. This is a pity: which means that the operation will be completed successfully. Rejected: Indicates that the operation fails.

Only the result of an asynchronous operation can determine the current state, and no other operation can change the state.

  • Once the state changes, it never changes again, and you can get this result at any time. The state of the Promise object changes:

Changed from Pending to Resolved to Rejected

As long as those two things happen, the state is frozen, it’s not going to change, it’s going to stay the same. This is quite different from an Event, which has the characteristic that if you miss it and listen again, you will not get the result.

Promise advantages and disadvantages:

Advantages:

  • With the Promise object, asynchronous operations can be expressed as a flow of synchronous operations, avoiding layers of nested callback functions.
  • Promise objects provide a unified interface that makes it easier to control asynchronous operations.

Disadvantages:

  • There is no way to cancel a Promise, which is executed as soon as it is created and cannot be cancelled halfway through.
  • If the callback function is not set, errors thrown inside a Promise are not reflected outside.
  • When you are in a Pending state, you have no way of knowing what stage of progress you are currently in (just started or about to complete).
Basic usage:

To create a Promise object, instantiate it by calling the Promise constructor with new. Steps to create a Promise:

var promise = new Promise(function(resolve, reject) {
    // Asynchronous processing
    // After processing, call resolve or reject
});
Copy the code

The Promise constructor contains one parameter and a callback with resolve and reject parameters. Perform some operation (asynchronous, for example) in the callback, calling resolve if all is well, reject otherwise.

Example:

var myFirstPromise = new Promise(function(resolve, reject){
    Resolve (...) is called when the asynchronous code executes successfully. Reject (...) is called when asynchronous code fails.
    // In this case, we use setTimeout(...) To simulate asynchronous code, which could be an XHR request or some HTML5 API method.
    setTimeout(function(){
        resolve("Success!"); // The code works fine!
    }, 250);
});
 
myFirstPromise.then(function(successMessage){
    //successMessage values resolve(...) The value passed by the method.
    // The successMessage parameter doesn't have to be a string, but this is just an example
    document.write("Yay! " + successMessage);
});
Copy the code

You can call the promise.then() method on an already instantiated Promise object, passing the resolve and reject methods as callbacks.

  • Promise.then () is the most commonly used method for promises.
promise.then(onFulfilled, onRejected)
Copy the code

Promise simplifies handling of errors. We can also write the above code like this:

promise.then(onFulfilled).catch(onRejected)
Copy the code
Related interview questions
  • With what did Promise kill callback hell?
  • Why did Promise introduce microtasks?
  • How does Promise implement chain calls?
  • Implement Promise’s resolve, Reject, and finally
  • Implement the Promise’s ALL and Race

More front end questions [click here] free!