• Promise详解


    1、什么是promise
    Promise是异步执行 可以解决回调地域
    2、promise的作用和应用场景
          作用:异步执行 解决回调地域(函数一层一层的嵌套,导致不知道执行到哪一步了,而我们需要执行某层函数的时候跳出来执行)
          应用:基本上都是带有这种onload特性的,就是我去干一件事等一会儿以后我再去执行,如img.onload=function(){},以及promise的ajax等。
          promise的其他应用:事件loop(异步过程中也是有分别的,比如setTimeout是一种异步,promise也是一种异步,他们的区别在哪,面试很重要)

    同步://同步执行    一步一步的向下执行
                当前DOM元素还未加载完成
                例:<script src="./js/a.js"></script>
                      <script src="./js/a.js"></script>
          <body>
                 //DOM元素
          </body>
    异步://异步执行    各自执行 执行完后各自去处理
                 当前DOM元素全部加载完了(执行完了),但是img和link这些还没有加载完,只是标签都加载完了
                例:<script src="./js/a.js"></script>
                      <script src="./js/a.js" async defer></script>
          <body>
                 //DOM元素
          </body>
      async  表示js加载完成后就执行,不会停下来,而是直接向后继续运行(body),但此时可能body中还有些东西b.js调用不了,这时候就用到了defer。
      defer  表示页面中所有的DOM元素都已经加载完成(包括图片),再执行。

    async和defer解决异步的缺陷:
    同时异步加载多张图片或者同时异步加载多个js文件会造成暂时性假死,会卡顿,导致所有css的link连接还有所有图片将会停止加载,而且假死完成后不恢复;于是有了promise

    3、promise的基本使用

    var promise=new Promise(function(resolve,reject){
           var img=new Image();
           img.src="img/3.jpg";
     //一旦执行了resolve或者是reject就不会再执行了另一个了
           img.onload=function(){
               resolve(img);        //resolve是指加载成功时执行
           };
           img.onerror=function(){
               reject("加载错误") //reject是指加载失败时执行
           }
    })

    4、promise的then 方法:

     //then中的两个参数:fn1代表执行成功的函数resolve,fn2代表执行失败的函数reject
     //promise.then(fn1(),fn2())}
              promise.then(fn1(img){
                  console.log(img);  //img参数是resolve中传过来的参数
              },fn2(txt){
                   console.log(txt);   // txt参数是reject中传过来的错误提示字符串
              })}

    promise吃相好一点的写法:

         function loadImg(_src){
              return  new Promise(function(res,rej){
                    var img=new Image();
                    img.src=_src;
                    img.onload=function(){
                        res(img);
                    };
                    img.onerror=function(){
                        rej("加载错误");
                    }
                });
        }

            loadImg("./img/3-.jpg").then(function(img){
                console.log(img);
            }).catch(function(){
                //catch函数中的函数就是reject执行的内容
            })

    5、Promise链式加载

            var arr=[];
            //Promise链式加载
            loadImg("./img/3-.jpg").then(function(img){
                arr.push(img);
                return loadImg("./img/4-.jpg");
                // .then中返回之前我们定义的promise,这时出去后依然可以继续使用 .then方法去继续加载新的图片
            }).then(function(img){
                arr.push(img);
                return loadImg("./img/5-.jpg");
            }).then(function(img){
                arr.push(img);
                return loadImg("./img/6-.jpg");
            }).then(function(img){
                arr.push(img);
                console.log(arr);
            })

    6、Promise中的promise.all()方法:

         var arr=[];
            for(var i=3;i<80;i++){
                arr.push(loadImg("img/"+i+"-.jpg"));
         }
        //全部加载完成后         而且加载时是按照先后顺序加载的,不会乱序
        Promise.all(arr).then(function(list){
           list.forEach(function(item){
               console.log(item.src);
           })
        })
    7、Promise中的promise.race()方法:

        //谁先加载进来就是谁
        Promise.race(arr).then(function(img){
            console.log(img);
        })

    8、Promise中的promise.resolve()方法:

         Promise.resolve().then(function(){

         })
         // 等同于下两句话

         var pro=new Promise(function(res,rej){
             res();
         })
         pro.then(function(){

         })
    9、Promise中的promise.reject方法:

        Promise.reject().then(function(){

        })
        // 等同于下两句话

        var pro=new Promise(function(res,rej){
            rej();
        })
        pro.catch(function(){
            
        })

  • 相关阅读:
    java程序陷阱
    Django学习之manage.py使用
    myeclipse安装SVN插件方法
    myeclipse2014黑色主题风格设置
    eclipse中svn插件的安装
    与MySQL的零距离接触
    配置tomcat的用户名和密码
    java中的作用域
    [原]Wpf应用Path路径绘制圆弧
    WPF中Converter的使用
  • 原文地址:https://www.cnblogs.com/angel-cloud/p/11442536.html
Copyright © 2020-2023  润新知