js中的Promise

• Promise如何实现内容

  • promise创建时执行promise中的函数，执行resolve或者reject后挂起等待，等待当前任务列中的所有代码全部执行完成，然后再查找then（catch）中的函数参数是否存在，如果存在，则调用

  • state===pending

    • 如果当前状态是pending状态，那么可以调用resolve或者reject

    • 如果不是，不能调用resolve或者reject

    • 保证在整个promise这种，resolve或者reject调用的唯一性

• 处理回调地狱

var num = 3;
      var list = [];
      var img = new Image();
      img.src = "./img" + num + "-.jpg";
      img.onload = function () {
        list.push(img);
        num++;
        img = new Image();
        img.src = "./img" + num + "-.jpg";
        img.onload = function () {
          list.push(img);
          num++;
          img = new Image();
          img.src = "./img" + num + "-.jpg";
          img.onload = function () {
            list.push(img);
            num++;
            img = new Image();
            img.src = "./img" + num + "-.jpg";
            img.onload = function () {
              list.push(img);
              num++;
              img = new Image();
              img.src = "./img" + num + "-.jpg";
              img.onload = function () {
                list.push(img);
              };
            };
          };
        };
      };
      // Promise的作用是处理回调地狱，让回调地狱扁平化
        function loadImage(src){
          return new Promise(function(resolve,reject){
            var img =new Image();
            img.onload=function(img){
              resolve(img);
            }
            img.onerror=function(){
              reject();
            }
            img.src=src;
          })
        }
        var arr=[];
        var mun=3;
        loadImage("./img/"+num+"-.jpg").then(function(img){
          arr.push(img);
          num++;
          return loadImage("./img/"+num+"-.jpg")
        }).then(function(img){
          arr.push(img);
          num++;
          return loadImage("./img/"+num+"-.jpg")
        }).then(function(img){
          arr.push(img);
          num++;
          return loadImage("./img/"+num+"-.jpg")
        });

• Promise是一个异步过程

 console.log("a");
      var p = new Promise(function (resolve, reject) {
        console.log("b");
        resolve();
      });
      console.log("c");
      p.then(
        function () {
          console.log("d");
        },
        function () {}
      );
      console.log("e"); //abced

• 关于resolve和reject

  • resolve 是表示正确完成时执行的函数

  • reject是表示错误时执行的函数

 function loadImage(src) {
        var p = new Promise(function (resolve, reject) {
          var img = new Image();
          //   resolve 是表示正确完成时执行的函数
          img.onload = function () {
            resolve(img);
          };
          //   reject是表示错误时执行的函数
          img.onerror = function () {
            reject(src);
          };
          img.src = src;
        });
        return p;
      } 

then和catch

• then中的第一个函数，是promise里面执行了resolve执行的

• catch中的函数，是promise里面执行了reject方法执行的

p.then(
        function (num) {
            console.log(num)
        }).catch(function(num){
            console.log(num);
        });

补充：Promise.all(arr),Promise.race(arr)

  //Promise.all()将Promise对象数组按照顺序异步全部完成后在then的第一个函数中，传入完成的结果
   //这个list参数arr这个promise的对象数组中所有异步then中返回img按顺序组合成的数组
      // 也可以理解为将arr中的每个promise的对象异步完成后的then中img按顺序加入到一个数组中，
      // 全部完成后返回这个数组
      Promise.all(arr).then(function(list){
          // console.log(list);//所有图片
          list.forEach(item=>{
              console.log(item.width,item.src);
          })
      })


// Promise.race()作用是将promise对象数组这种最先执行完成的内容通过后面的then传入
         Promise.race(arr).then(function(img){
        console.log(img.src);
    })