promise定义及其用法

最新推荐文章于 2024-07-20 23:55:03 发布

咩有猫腻.

最新推荐文章于 2024-07-20 23:55:03 发布

阅读量713

点赞数

分类专栏：前端后端

本文链接：https://blog.csdn.net/DcTbnk/article/details/106552581

版权

前端后端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

一.promise

promise 异步编程的解决方案
    多次ajax请求，并且需要严格的按照顺序执行
    A B C 三个接口
    //一层层的回调函数嵌套，形成回调地狱

    ajax({
        success:function(){
            ajax({
                success:function(){
                    ajax({

                    })
                }
            })
        }
    })
    ajax();
    ajax();
    ajax();

<script>
      //类 Promise
      //三种状态 两种变化形式 pending -> fullfilled  pending->rejected 一旦状态发生改变，就不再变化了

      let promise = new Promise(function (resolve, reject) {
        resolve();//成功的状态
        reject();//失败的状态
      });
      promise.then(
        function () {
          console.log("成功了");
        },
        function () {
          console.log("失败了");
        }
      );

      let p1 = new Promise((resolve, reject) => {
        //放异步操作
        setTimeout(function () {
          resolve();
        }, 3000);
      });
      p1.then(function () {
        console.log("开始");
      });
      //*********************************
      setTimeout(function () {
        console.log("开始");
        setTimeout(function () {
          console.log("进行");
          setTimeout(function () {
            console.log("完成");
          }, 1000);
        }, 800);
      }, 3000);

      //*********************************
       let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 3000);
      });
      p1.then(() => {
        console.log("开始");

        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve();
          }, 800);
        });
      })
        .then(() => {
          console.log("进行");
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve();
            }, 1000);
          });
        })
        .then(() => {
          console.log("完成");
        });

        //****************************************
      function timeout(time) {
        return new Promise((resolve, reject) => {
          setTimeout(resolve, time);
        });
      }

      timeout(3000)
        .then(() => {
          console.log("开始");
          return timeout(800);
        })
        .then(() => {
          console.log("进行");
          return timeout(1000);
        })
        .then(() => {
          console.log("完成");
        });

      //给then方法传递数据********************************

      let promise = new Promise(function (resolve, reject) {
        //resolve(11); //成功的状态
        reject("没有眼缘"); //失败的状态
      });

      promise.then(
        (data) => {
          console.log(data);
        },
        (data) => {
          console.log(data);
        }
      );
    </script>

二.结合promise封装一个基础的ajax

html

<body>
    <script src="ajax.js"></script>
    <script>
      ajax("data1.json")
        .then((data) => {
          console.log(data);

          return ajax("data2.json");
        })
        .then((data) => {
          console.log(data);
        });
    </script>

ajax.js

function ajax(url) {
  return new Promise((resolve, reject) => {
    if (window.XMLHttpRequest) {
      var xhr = new XMLHttpRequest();
    } else {
      var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhr.open("get", url);
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          var data = xhr.responseText;
          resolve(data);
        } else {
          reject();
        }
      }
    };
  });
}

三.promise其他的一些方法

<script>
      /* let promise = new Promise(function (resolve, reject) {
        //resolve(); //成功的状态
        reject(); //失败的状态
      });
      promise
        .then(() => {
          console.log("成功");
        })
        .catch(() => {
          console.log("失败");
        }); */

      //all  race  是类方法  Promise
      let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 1000);
      });
      let p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 5000);
      });
      //all 所有的异步操作都完成之后，再执行相应的代码，以时间最长的为准
      Promise.all([p1, p2]).then(() => {
        console.log("all-----");
      });
      //all 只要有一个异步操作完成之后，就执行相应的代码，以时间最短的为准
      Promise.race([p1, p2]).then(() => {
        console.log("race*****");
      });
    </script>