Promise 对象---异步调用

这里先主要讲解下 promise对象用于图片加载异步操作，具体深入后续还会更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // promise是什么？
        // 1、主要用于异步计算
        // 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
        // 3、可以在对象之间传递和操作promise，帮助我们处理队列

        //图片的预加载就属于 异步的回调  promise就是解决回调地狱的

        //创建promise 对象，
        //promise对象中传递一个回调函数，其中函数有两个参数回调函数，resolve 成功函数，reject 失败函数
        new Promise(function(resolve,reject){

            var img=new Image();
            img.src="./image/icon/8.gif";
            //img对象创建加载函数，如果成功了  执行resolve 函数 并且把this 当前的img对象传递进去
            //后期then函数需要调用
            img.onload=function(){
                resolve(this);
            }
            //此函数表示 img图像加载失败 会调用reject函数 ，并且给reject函数传递一个参数 表示出错了
            img.onerror=function(){
                reject("图片加载出错了");
            }
            //promise对象不能直接执行，需要使用then函数来执行
            //其中then函数中也包含两个 回调函数，
            //第一个成功后 需要调用的函数，其中函数的参数为resolve 成功函数 传入的参数 this
            //第二个失败后 需要调用的函数，其中函数的参数为reject 失败函数 出入的参数 “图片加载失败”
                                        
        }).then(function(data){
            console.log(data);
        },function(error){
            console.log(error);
        });




        
    </script>

</body>
</html>

以上的代码风格不好看，看不懂

        function loadPromise(src){
            return new Promise(function (resolve,reject){
                var img=new Image();
                img.src=src;
                img.onload=function(){
                    resolve(this);
                }
                img.onerror=function(){
                    reject("加载错误-");
                }
            });
        }
      

        //调用
        loadPromise("./image/icon/1.gif").then(function (data){
            console.log(data);
        },function (err){
            console.log(err);
        });

注意：对象手写字母是大写的

还有我们以上的代码好像知识加载了一张图片那多张呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script> 

    function loadpromise(src){
        return new Promise(function (res,rej){
            var img=new Image();
            img.onload=function(){
                res(this);
            }
            img.onerror=function (){
                rej("加载失败");
            }
            img.src=src;
        
        });

    }

    //加载多张图片，使用的是promise的链式编程
    //创建一个数组，如果执行成功了，我们会把这个对象存储到数组中
    var arr=[]
    //调用函数
    loadpromise("./image/icon/1.gif").then(function(data){
        //添加数组中
        arr.push(data);
        //在返回一个promise对象 
        return loadpromise("./image/icon/2.gif").then(function (data){
        //在添加数组中
        arr.push(data);
        console.log(arr[0].src);
        },function(err){
            console.log(err);
        });
    },function(err){
        console.log(err);
    });
    

    </script>
</body>
</html>

posted @ 2020-09-10 12:45 WhiteSpace 阅读(285) 评论(0) 收藏举报

刷新页面返回顶部

WhiteSpace

Promise 对象---异步调用

公告