Promies的概念 链式调用

axios基于promis的API进行封装的
Promise主要解决了异步操作 回调函数的多层嵌套形成回调地狱的问题 、
返回的是Promise Promise原型Prototype里面有很多方法 .then .catch,rejevtd
Promise是一个构造函数 通过实例化对象 return Promise实例化对象.then .then 会形成链式调用

Promise-总结

问题:

谈一谈你对于Promise的理解?

  1. 第一层理解(解决了什么问题)

    1. 回调函数嵌套-->链式编程

    2. .then().then()

    3. 第二层理解(语法层面,实际应用)

      1. new Promise((resolve,reject)=>{ 异步的逻辑, 根据成功/失败 (resolve/reject) })

      2. resolve和reject的本质,修改Promise对象的状态

      3. 状态有3种:

        1. 默认状态:pending

        2. 成功:fullfilled--->then

        3. 失败:rejected--->then(,失败的回调函数),.catch(err=>{})

      4. then方法默认也会返回一个Promise,可以继续的then下去

      5. 但是一般我们 会自己返回一个Promise对象进行处理

      6. 开发中

        1. 常用,接口调用

          1. then

          2. 多个接口需要都等待还可以使用Promise的静态方法

          3. Promise.all([pro对象1,promise对象2...]).then(res=>{})

            1. resPromise数组种每一个对象的成功结果

          4. Promise.race等待第一个

 
 
复制代码
<body>
    <h2>测试axios返回的是否是Promise</h2>
    <script src="./lib/axios.js"></script>
    <script>
      // axios基于promis的API进行封装的
      // const p = axios({}).then(() => {});
      // console.log(p); //返回的是Promise Promise原型Prototype里面有很多方法 .then .catch,rejevtd

      // 两种状态只能执行 一次 谁写上面谁先执行
      // Promise是一个构造函数 p是实例化对象   return Promise实例化对象.then .then 会形成链式调用

      const p = new Promise((resolve, reject) => {
        resolve(); //状态成功时执行.then回调函数
        reject(); //状态失败时执行.catch回调函数
      });
      p.then(() => {
        console.log("成功了");
      }).catch(() => {
        console.log("我失败了");
      });

      // 过一秒 参数传过去 ‘成功’
      const p1 = new Promise((resolve, reject) => {
        // console.log("resolve是一个方法", resolve);//ƒ () { [native code] }
        setTimeout(() => {
          resolve("我成功了");
        }, 1000);
      }).then((res) => {
        console.log("res是resolve成功时传过来的参数", res);
      });
    </script>
  </body>
复制代码
Promise的链式调用
复制代码
<body>
    <h2>链式调用</h2>
    <script src="./lib/axios.js"></script>
    <script>
      //  resolve   reject (形参) 名字可以改,但是建议别改
      // 实例化对象可以调原型上的方法 可以进行链式调用
      // Promise是一个构造函数 p是实例化对象 return Promise实例化对象.then .then 形成链式调用
      const p = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("我是1");
        }, 1000);
      })
        .then((res) => {
          console.log("1", res);
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve("我是2");
            }, 2000);
          });
        })
        .then((res) => {
          console.log("2", res);
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve("我是3");
            }, 3000);
          });
        })
        .then((res) => {
          console.log("3", res);
        });
    </script>
  </body>
复制代码
Promise 提取为方法
复制代码
<body>
    <h2>Promise 提取为方法</h2>
    <script>
      // 调用方法,即可获取Promise对象
      // delay 秒为单位
      function Promise1(dalay) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(dalay);
          }, dalay * 1000);
        });
      }
      // 当resolve(）才会进入.then
      Promise1("1")
        .then((res) => {
          console.log("res1", res);
          return Promise1("2");
        })
        .then((res) => {
          console.log("res2", res);
          return Promise1("3");
        })
        .then((res) => {
          console.log("res3", res);
        });
    </script>
  </body>
复制代码
Promise中的两个方法 Promise.all([p1,p2,p3,p4]) Promise.race（[]）
复制代码
<body>
    <script>
      function timeoutPro(delay) {
        return new Promise((resolve, reject) => {
          // 根据成功  resolve then
          setTimeout(() => {
            resolve(`延迟了${delay}秒执行`);
          }, delay * 1000);
        });
      }
      // 创建多个Promise对象
      // p1,p2,p3 Promise对象
      const p1 = timeoutPro(2);
      const p2 = timeoutPro(3);
      const p3 = timeoutPro(1);
      const p4 = timeoutPro(9);
      Promise.all([p1, p2, p3, p4])
        .then((res) => {
          {
            console.log(res);
          }
        })
        .catch((res) => {
          console.log(res);
        });
      /*
      // Promise中的两个方法 Promise.all([p1,p2,p3,p4]) Promise.race（[]）
        语法：Promise.all([p1,p2,p3,p4])
       1. Promise.all 等待传入的Promise 必须是一个数组,每一项 都完成
        2. 每一个Promise then的结果,挨个的设置给res 所有都成功则会走.then 否则有一个不满足条件就走。catch
        3. res-->array
        // 4. all所有等所有
      // */

      /*
        1. Promise.race（[]） 等待传入的Promise数组,第一个 完成就触发then
        2. then中获取到的是 第一个完成Promise对象的then中的值
        3. race 竞赛,等第一
      */
      Promise.race([p1, p2, p3, p4])
        .then((res) => {
          console.log(res);
        })
        .catch((res) => {
          console.log(res);
        });
    </script>
  </body>
复制代码
Promise -all和race方法与接口结合
复制代码
<body>
    <h2>Promise.all和Promise.race结合接口</h2>
    <script>
      // Promise -all和race方法与接口结合
      function myAxios(option) {
        // 获取传入的属性
        const { url, method = "get", data } = option;
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          // 调用 新闻接口
          xhr.open(method, url);
          // 设置 请求头 内容格式为JSON
          xhr.setRequestHeader("content-type", "application/json");
          xhr.addEventListener("load", function () {
            // console.log('load:', xhr.response)
            // 通过 resolve 将成功的结果传递给then
            resolve(JSON.parse(xhr.response));
          });
          // 发送  JSON
          xhr.send(JSON.stringify(data));
        });
      }

      // 1.测试多个接口
      // 新闻 图书接口 英雄接口
      const p1 = myAxios({
        method: "get",
        url: "http://ajax-api.itheima.net/api/news",
      });
      const p2 = myAxios({
        method: "get",
        url: "http://ajax-api.itheima.net/api/books",
      });
      const p3 = myAxios({
        method: "get",
        url: "http://ajax-api.itheima.net/api/robot",
      });
      Promise.all([p1, p2, p3])
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
      Promise.race([p1, p2, p3])
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    </script>
  </body>
复制代码
Promise then的返回值
复制代码
<body>
    <script>
      function timeoutPro(delay) {
        return new Promise((resolve, reject) => {
          // 执行异步
          setTimeout(() => {
            resolve(delay);
          }, delay * 1000);
          // 成功 resolve-->then
        });
      }

      //Promise then的返回值
      // 无论他内部是否写了return 都是Promise对象
      // 可以继续then
      // 如果不写return 下一个then中获取到的就是 默认的返回值 undefined
      // Promise底层已经处理过了 return 了一个普通的值 也会变为Promise实例化对象
      // 一般很少直接返回一个写死的值,一般返回Promise对象居多
      const res = timeoutPro(1)
        .then((res) => {
          console.log(res);
        })
        .then((res1) => {
          console.log(2);
        });
    </script>
  </body>
复制代码
Promise.reject和catch
复制代码
<body>
    <script>
      // Promise.reject和catch
      function randomPro() {
        return new Promise((resolve, reject) => {
          // 延迟 1s
          setTimeout(() => {
            // 随机数
            // Math.random() 0-1的小数
            // * 100 控制范围
            // parseInt 转整数
            const num = parseInt(Math.random() * 100);
            if (num > 0 && num < 50) {
              resolve("成功啦:" + num);
            } else if (num >= 50 && num <= 100) {
              reject("失败啦:" + num);
            }
          }, 1000);
        });
      }
      /*
        1. then的第二个参数在失败时触发(如果写了的话)
        2. catch的本质 就是调用了then 传递勒第二个参数
      */
      randomPro()
        .then(
          (res) => {
            console.log("res:", res);
          },
          (err) => {
            console.log("err:", err);
          }
        )
        .finally(() => {
          console.log("成功失败都走");
        });
    </script>
  </body>
复制代码
Promise的3种状态
复制代码
<body>
    <h2>Promise的状态</h2>
    <script>
      // Promise的3种状态
      function randomPro() {
        return new Promise((resolve, reject) => {
          // 延迟 1s
          setTimeout(() => {
            // 随机数
            // Math.random() 0-1的小数
            // * 100 控制范围
            // parseInt 转整数
            const num = parseInt(Math.random() * 100);
            if (num > 0 && num < 50) {
              resolve("成功啦:" + num);
            } else if (num >= 50 && num <= 100) {
              reject("失败啦:" + num);
            }
          }, 1000);
        });
      }
      /*
        1. then的第二个参数在失败时触发(如果写了的话)
        2. catch的本质 就是调用了then 传递勒第二个参数
      */
      // 保存下来 方便后续查看
      const p = randomPro();
      console.log("初始化状态，刚刚实例化"); //pending
      p.then((res) => {
        console.log(res); //fulfilled
        console.log("成功的状态", p);
      }).catch((err) => {
        console.log(err);
        console.log("失败时的状态", p); //rejected
      });
    </script>
  </body>
复制代码

 

 

posted @   噢噢噢J  阅读(66)  评论(0)  编辑  收藏  举报
相关博文：
·  axios的config模式 工作中最常使用的一种方法
·  axios 的请求方式
·  简单认识Promise
·  深入理解Promise
·  Promise简介原理和常见方法
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手