promise

promise

• 操作性事件 ：操作后才会执行的事件

  • 点击，拖拽等事件

  • 需要时间

    • load事件 异步
    • setTimeout 异步
    • setInterval 异步
    • requestAnimationFrame() 异步 // 帧时间固定

• 参数

  • resolve 执行成功所回调的函数
  • reject 执行失败所回调的函数
  • then

 var p=new Promise(function(resolve,reject){
            var img=new Image();//返回一个promise对象
               img.src="./img/17.jpg";
               img.onload=function(){
                   resolve(img);
               }
               img.onerror=function(){
                   reject(img.src+"地址错误");
               }
          }); 
 第一种写法 
        p.then(function(a){
            console.log(a);//执行resolve执行这个函数
          },function(b){
            console.log(b);//执行reject执行这个函数
          }) 
 第二种写法
        p.then(function(a){
            console.log(a);//执行resolve执行这个函数
          }).catch(function(b){
              console.log(b);//执行reject执行这个函数
          }) 

• PromiseStatus 分为3个

  • pending 准备状态
  • fullfield 执行resolve的状态
  • rejected 执行reject的状态

• 同步

  • 停止等待运行结束，继续后续的运行
  • 同步任务逐条进行

• 异步

  • 异步操作。就是需要等待一个内容完成后继续执行后面的内容，但是不能将后面的内容写在等待函数外，否则就会同时执行两个。
  • 异步任务分为固定时间，非固定时间

• promise可解决回调地狱

var img=new Image();
        img.src="./img/16-.jpg";
        img.onload=function(){//加载图片
            console.log(img.width,img.offsetWidth);
            var bn=document.createElement("button");
            bn.textContent="按钮";
            document.body.appendChild(img);
            bn.style.position="absolute";
            bn.style.left=img.offsetWidth+8+"px";
            document.body.appendChild(bn);
            bn.onclick=function(){
                img.remove();//移除图片
                var imgs=new Image();
                imgs.src="./img/17.jpg";
                imgs.onload=function(){//重新加载图片
                    document.body.appendChild(imgs);
                    bn.style.left=imgs.offsetWidth+8+"px";
                }
            }
        } 
        // 回调地狱

• 异步列表中谁最先完成就执行谁

   Promise.race(arr).then(function(img){
            console.log(img);
        })
  

• 统一处理所有Promise数组，并且返回一个列表

  Promise.all(arr).then(function(list){
            list.forEach(item=>{
                console.log(item.src);
            })
  

• 静态方法，直接运行resolve

    Promise.resolve(1).then(function(a){
              console.log(a);
        })
    
    等同于
        new Promise(function(resolve,reject){
          resolve(1);
        }).then(function(a){
          console.log(a);
        }) 
  

• reject

   Promise.reject(1).catch(function(b){
          console.log(b);
        })
      等同于
        new Promise(function(resolve,reject){
          reject(1);
        }).catch(function(b){
          console.log(b);
        }) 
  

• 是否可以连续then

   var p=new Promise(function(resolve,reject){
          resolve(1);
       });
       p.then(function(a){
          //  console.log(a);
          //  如果在这里没有return Promise对象就会继续执行下一个then中的内容
          // 下一个then中对应的执行对象仍然是当前promise对象
       });
       p.then(function(){
  
       })
       
       等同于
       new Promise(function(resolve,reject){
          resolve(1);
       }).then(function(a){
  
       }).then(function(){
  
       })
  

• 代码执行的顺序

  • promise对象方法中then和catch方法本身就是异步

  • 在Promise对象的then和catch中都是异步的，除此之外都是同步

       console.log("a");
        new Promise(function(resolve,reject){
            console.log("b");
            resolve(1);
            console.log("c");
         }).then(function(a){
            console.log("d");
         }).then(function(){
            console.log("e");
         }) 
         console.log("f"); 
        //  a f b c d e
        //先同步后异步，先执行a f  后执行then里面的
    

• Promise中resolve和reject执行干扰问题

    function getImage(src) {
          return new Promise(function (resolve, reject) {
            var img1 = new Image();
            img1.src = src;
            img1.onload = function () {
              //   只能执行一个，具有排他性
              
              resolve(img1);
              reject(img1.src+"地址错误");
            };
          });
        }
  

  async和await

• async 函数执行后返回一个Promise对象

• await只能写在async函数中

• await 只能处理promise对象的异步等待

• async 函数中使用return返回的内容可以通过then来获取

 function getImage(src) {
        return new Promise(function (resolve, reject) {
          var img1 = new Image();
          img1.src = src;
          img1.onload = function () {  
            resolve(img1);
          };
        });
      }
        async function loadImages(){
            var arr=[];
            for(var i=3;i<30;i++){
               await getImage("./img/"+i+"-.jpg").then(function(img){
                    arr.push(img);
               })