16.ES6新特性：Promise对象

最新推荐文章于 2024-03-29 16:34:35 发布

想成为数据分析师的开发工程师

最新推荐文章于 2024-03-29 16:34:35 发布

阅读量112

点赞数 1

分类专栏： Vue 文章标签： javascript 前端 servlet ES6 vue.js

本文链接：https://blog.csdn.net/m0_63953077/article/details/127197511

版权

Vue 专栏收录该内容

36 篇文章 7 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">图片加载</div>
    <script>
        /*
            1.Promise是异步编程的一种解决方案，比传统的回调事件和函数更合理强大
                异步编程：setTimeout，可以指定等待时间。先执行以下的代码，再返回来执行本代码
            2.Promise相当于一个容器，保存着某个未来才会结束的事件（一个异步操作）的结果
            3.语法上说：Promise是一个对象，从他可以获取异步消息
            4.Promise提供统一的API，各种异步操作用相同的方法进行处理
            5.可以把异步操作以同步操作的流程表达处理，避免层层嵌套的回调函数
        */
        var box = document.getElementById('box')

                            // 传递图片地址
        function loadImageAsync(url) {
                                        //    成功       失败
            const promise = new Promise(function(resolve, reject){
                // Promise对象用于处理异步。异步处理：消耗时间多的代码
                const image = new Image(); // 创建image对象
                image.src = url // 传递图片地址
                // 监听图片上传成功
                image.onload = function () {
                    resolve(image)
                }
                // 监听图片上传失败
                image.onerror = function(){
                               // 抛出错误信息（红色字体显示）
                    reject(new Error('Could not load image at' + url))
                }
            })
            return promise;
        }
        const promise = loadImageAsync("http://iwenwiki.com/api/musicimg/2.png");
        // then用来分别指定resolved状态和rejected状态的回调函数
        promise.then(function (data) {
            // 成功
            box.appendChild(data)
        },function(error){
            // 失败
            box.innerHTML = "图片加载失败"
            console.log(error);
        })
    </script>
</body>
</html>