Promise实例如何解决地狱回调

系列文章目录

提示：今天下午公司同事有问到有条件发送网络请求

情景如下：发起第一个请求，拿到第一个请求后；才能继续发送第二个请求；第二个请求发送完毕后，用第二个参数第三个请求。

上面的这个情景就是地狱回调的问题，这时候我们可以使用封装Promise方法去解决我们一直在 .then() 中写请求的方式，同时也让我们的代码更加的具有可读性。

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、地狱回调（代码案例）：

//fetch就是我们的网络请求（这里是模拟与举例子）
    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 ！！！");
        });
      });
    });

这里打印的结果是：
第一次：yi ！
第二次：er ！！
第三次：san ！！！

二、什么是Promise？

Promise:是一个构造函数，用来传递异步操作消息，链式调用，避免层层嵌套的回调函数。

1. promise接收两个函数参数，resolve和reject，分别表示异步操作执行成功后的回调和失败的回调

2. Promise有三种状态：pending进行中、resolve已完成、rejected已失败, 这些状态只能由pending ->
   resolved, pending -> rejected,一旦promise实例发生改变，就不能在变了，任何时候都能得到这个结果

三、使用Promise解决地狱回调：

1.写一个返回Promise实例的方法

代码分析图如下

代码如下（示例）：

//requestMethods 是一个函数（方法），可以传递a，b，c三个参数

 function requestMethods(a, b, c) {
    
       //这一步骤是将 new Promise 的实例返回给 requestMethods函数
      return new Promise((resolve, reject) => {
    
        //当b=2（b是第二次请求的结果），c=3 的时候执行
        if (b == 2 && c == 3) {
    
          setTimeout(() => {
    
            resolve(10);
          }, 2000);
          return;
        }
        //当a=1（a是一次请求得到结果），b=2 的时候执行
        if (a == 1 && b == 2) {
    
          setTimeout(() => {
    
            resolve(b);
          }, 2000);
          return;
        }
        //当a=1 的时候执行
        if (a == 1) {
    
          resolve(a);
          return;
        }
      });
    }

2.调用 requestMethods()查看结果

代码分析图如下

代码如下（示例）：

//这里是第一次网络请求（模拟）
 requestMethods((a = 1))
      //第一次的请求结果 then 回调函数
      .then((res) => {
    
        console.log(res, "a");
        //这里是第二次网络请求（模拟）
        return requestMethods((a = res), (b = 2));
      })
        //第二次的请求结果
      .then((res) => {
    
        console.log(res, "b");
        //这里是第三次网络请求（模拟）
        return requestMethods((a = 1), (b = res), (c = 3));
      })
        //第三次的请求结果
      .then((res) => {
    
        console.log(res, "c");
      });

---

总结

提示：这里对文章进行总结：总体上Api是非常容易理解的，我给同事解释了一遍就懂了，希望文章对大家是有用的，同时我写文章也能提升一下我自己的掌握程度，希望大家都可以非常的！！！！！！！ 加油！！！！！！