How promise instance solves hell callback

List of articles

Tips ： This afternoon, colleagues in the company asked about sending network requests conditionally

The scene is as follows ： Initiate the first request , After getting the first request ; To continue sending the second request ; After the second request is sent , Use the second parameter and the third request .

The above scenario is the problem of hell callback , At this time, we can use encapsulation Promise Methods to solve what we have been doing .then() Write the request in , It also makes our code more readable .

---

Tips ： After writing the article , Directories can be generated automatically , How to generate it, please refer to the help document on the right

---

One 、 Hell callback （ Code case ）：

//fetch Is our network request （ Here are simulations and examples ）
    fetch("http://127.0.0.0:3000/").then((res) => {
    
      console.log("yi ！");
      fetch("http://127.0.0.0:3000/diyi").then((res) => {
    
        console.log("er ！！");
        fetch("http://127.0.0.0:3000/dier").then((res) => {
    
          console.log("san ！！！");
        });
      });
    });

The result printed here is ：
for the first time ：yi ！
The second time ：er ！！
third time ：san ！！！

Two 、 What is? Promise？

Promise: It's a constructor , Used to deliver asynchronous operation messages , call chaining , Avoid nested callback functions .

1. promise Receive two function parameters ,resolve and reject, It represents the callback after successful execution of asynchronous operation and the callback after failure

2. Promise There are three states ：pending Have in hand 、resolve Completed 、rejected Failed , These states can only be determined by pending ->
   resolved, pending -> rejected, once promise The instance has changed , Can't change , You can get that at any time

3、 ... and 、 Use Promise Solve hell callback ：

1. Write a return Promise Example method

The code analysis diagram is as follows

The code is as follows （ Example ）：

//requestMethods  It's a function （ Method ）, It can deliver a,b,c Three parameters 

 function requestMethods(a, b, c) {
    
       // This step is to  new Promise  Return to  requestMethods function 
      return new Promise((resolve, reject) => {
    
        // When b=2（b It is the result of the second request ）,c=3  When it comes to execution 
        if (b == 2 && c == 3) {
    
          setTimeout(() => {
    
            resolve(10);
          }, 2000);
          return;
        }
        // When a=1（a It's a request to get the result ）,b=2  When it comes to execution 
        if (a == 1 && b == 2) {
    
          setTimeout(() => {
    
            resolve(b);
          }, 2000);
          return;
        }
        // When a=1  When it comes to execution 
        if (a == 1) {
    
          resolve(a);
          return;
        }
      });
    }

2. call requestMethods() View results

The code analysis diagram is as follows

The code is as follows （ Example ）：

// This is the first network request （ simulation ）
 requestMethods((a = 1))
      // The first request result  then  Callback function 
      .then((res) => {
    
        console.log(res, "a");
        // This is the second network request （ simulation ）
        return requestMethods((a = res), (b = 2));
      })
        // The result of the second request 
      .then((res) => {
    
        console.log(res, "b");
        // This is the third network request （ simulation ）
        return requestMethods((a = 1), (b = res), (c = 3));
      })
        // The third request result 
      .then((res) => {
    
        console.log(res, "c");
      });

---

summary

Tips ： Here is a summary of the article ： Overall Api It's very easy to understand , I explained it to my colleagues and understood , I hope this article is useful to you , At the same time, writing articles can also improve my own mastery , I hope everyone can be very ！！！！！！！ come on. ！！！！！！