About the usage and precautions of promise in javascript (recommended)

1. Promise description

Promise is a standard built-in object in JavaScript that is used to represent the final state of an asynchronous operation (failure or successful completion) and its result value. It allows you to associate the reason for the ultimate success or failure of the asynchronous operation with the response handler, that is, through promise you can customize what to do after the asynchronous operation ends. In this case, the asynchronous method is very similar to the synchronous method and also has a return value, but this return value does not return the final value immediately, but returns a promise. When the state of the promise changes, the corresponding handler will be triggered.

A promise is always in one of the following states: 1. Pending 2. Fulfilled 3. Rejected

When promise is first created, it is in a pending state. It has neither been fulfilled nor rejected. It is used to wrap functions that have not yet been added with promise support. The wrapped function becomes an asynchronous operation function. When the operation ends, there will be two branches, one is fulfilled and the other is rejected, as shown in the figure below. A fulfilled promise will call the subsequent then method, while a rejected promise can either call the then method or be caught by the catch method. Why can the then method capture promises of two states? I won’t talk about it here, but will introduce it in detail below.

2. Promise process direction

The above picture is a flowchart of promise. From left to right, we can see that when a promise is in a pending state, it goes through two branches to enter the then method or the catch method respectively. Both of these c methods will return promise. If this promise is also finalized, and there is a then method or a catch method afterwards, it will enter the subsequent then and catch until there is nothing.

In other words, promise and then or catch can form a chain structure of asynchronous operations. Combined with the event loop mechanism of js, this makes the advantages of js more obvious. It can still be frequently seen on browsers today.

We need to pay attention to the characteristics of the process:

1. Promise is an object. Its transfer success does not depend on the return value, but on the finalization of the state (success or failure)

2. then and catch are functions. As long as the state of a promise changes, the then or catch method corresponding to the promise will be called. These two methods themselves will return a promise, and the returned promise will affect the then or catch method following these two methods. The return value of both methods must be promise.

3. Creation of promise

Promise object is created by the new keyword and its constructor. This constructor takes a function called an executor function as its parameter. This "handler function" accepts two functions - resolve and reject - as its parameters. When the asynchronous task is successfully completed and returns a result value, resolve function is called; when the asynchronous task fails and returns the reason for the failure (usually an error object), reject function is called. Here is an example:

let myFirstPromise = new Promise(function(resolve, reject){
 //When the asynchronous code executes successfully, we will call resolve(...), and when the asynchronous code fails, we will call reject(...)
 //In this example, we use setTimeout(...) to simulate asynchronous code. The actual code may be an XHR request or some HTML5 API method.
 setTimeout(function(){
  resolve("Success!"); //The code executes normally!
 }, 250);
});

myFirstPromise.then(function(successMessage){
 //The value of successMessage is the value passed in by calling the resolve(...) method above.
 //The successMessage parameter does not have to be a string type, this is just an example console.log("Yay! " + successMessage);
});

4. Advantages of promise

When the promise does not appear, if we call the asynchronous code block, there is no way to maintain the order. If there is a need for the results of the asynchronous code to be in order, how can we achieve it?

In the past, asynchronous code was usually embedded layer by layer to implement asynchronous code in sequence, but this made code maintenance difficult and increased the difficulty of development.

doSomething(function(result) {
 doSomethingElse(result, function(newResult) {
 doThirdThing(newResult, function(finalResult) {
  console.log('Got the final result: ' + finalResult);
 }, failureCallback);
 }, failureCallback);
}, failureCallback);

This is classic callback hell. If the promise introduced earlier is used, the code becomes a chain structure that is easy to maintain

5. The promise type returned by the then method

When a Promise is fulfilled or rejected, the returned function will be called asynchronously (scheduled by the current thread loop). The specific return value is returned according to the following rules. If the callback function in then :

• If a value is returned, the Promise returned by then will become the accepted state, and the returned value will be used as the parameter value of the callback function of the accepted state.
• If no value is returned, the Promise returned by then will become an accepted state, and the parameter value of the callback function of the accepted state will undefined .
• Throw an error, then the Promise returned by then will be rejected, and the thrown error will be used as the parameter value of the rejection callback function.
• Return a Promise that is already in the accepted state, then the Promise returned by then will also become accepted, and the parameter value of the callback function of the accepted state of that Promise will be used as the parameter value of the callback function of the accepted state of the returned Promise.
• If a Promise that is already rejected is returned, the Promise returned then will also be rejected, and the parameter value of the rejection callback function of that Promise will be used as the parameter value of the rejection callback function of the returned Promise.
• returns a pending Promise, then the state of the Promise returned by then is also pending, and its final state is the same as that of the Promise; at the same time, the callback function parameters called when it becomes final are the same as the callback function parameters when the Promise becomes final.

6. Errors captured by catch

Catch can catch errors that occur in promise combinations, but there are two types of errors that cannot be caught:

1. Resolved errors cannot be caught

//Create a new Promise that is resolved var p1 = Promise.resolve("calling next");

var p2 = p1.catch(function (reason) {
 //This method will never be called console.log("catch p1!");
 console.log(reason);
});

p2.then(function (value) {
 console.log("next promise's onFulfilled"); /* next promise's onFulfilled */
 console.log(value); /* calling next */
}, function (reason) {
 console.log("next promise's onRejected");
 console.log(reason);
});

2. Errors thrown in asynchronous functions cannot be caught

It should be noted that the author has discovered through personal practice that after the asynchronous function wrapped by promise is executed successfully, the resolve and reject methods must be explicitly called to trigger the subsequent then and catch methods. If the promise method does not wrap an asynchronous function but an ordinary synchronous function, if the synchronous code runs incorrectly, even if the reject method is not called, the subsequent catch method can still capture the error. However, if the synchronous code does not have an error and the resolve method is not explicitly called to transfer, the subsequent then method will not be triggered.

7. Advanced Examples

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  *{
   margin: 10px;
  }
  html{
   width: 100%;
   height: 100%;
  }
  body{
   width: 100%;
   height: 100%;
   display:flex;
   align-items: center;
   justify-content: center;
  }
  div.displaydatabox{
   width: 300px;
   height: 300px;
   border-radius: 50px;
   text-align: center;
   line-height: 300px;
   box-shadow: 0 0 10px 2px black;
  }
  div.button{
   width: 100px;
   height: 50px;
   border-radius: 21px;
   border: 2px solid orange;
   line-height: 50px;
   text-align: center;
   cursor: pointer;
  }
 </style>
</head>
<body>
 <div class="button">Create</div>
 <div class="button">Enter text</div>
 <div class="button">Disappear</div>
 <script lang="javascript">
  let buttonlist = document.querySelectorAll("div.button");
  let body = document.querySelector("body");
  buttonlist[0].onclick=function()
  {
   let div = document.createElement("div");
   div.className="displaydatabox";
   body.appendChild(div);
  }
  buttonlist[2].onclick=function()
  {
   let div = document.querySelector("div.displaydatabox");
   body.removeChild(div);
  }
  buttonlist[1].onclick=function(e)
  {
   let p1 = new Promise((resolve, reject) =>
   {
    setTimeout(()=>{//Use setTimeout function to simulate asynchronous function let div=document.querySelector("div.displaydatabox");
     div.textContent="This is a promise experiment";
     //reject(1);
     resolve(1); //Calling resolve will call the first then
    },2000);
   }).then(function(resolve){
    return new Promise((resolve,reject)=>{
     console.log("This is a promise whose status has not been finalized, so all the subsequent then methods will not be called"); //resolve (1) //No resolve or reject is called, so the status is not finalized. If called, it will output 1 and finally it has been called!!
    })
   .then(function(e){
    console.log(e);
   });
   }).catch(function(e)
   {
    console.log(e+"No block can be entered!!");
   }).then(()=>
   {
    console.log("finally it has been called!!");
   })
  }
 </script>
</body>
</html>

This is the end of this article about the usage and precautions of promise in javascript. For more relevant content on the usage of promise in js, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!