如何使用promise

最新推荐文章于 2025-05-28 20:43:29 发布

xuanwuziyou

最新推荐文章于 2025-05-28 20:43:29 发布

阅读量394

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端技术

本文链接：https://blog.youkuaiyun.com/xuanwuziyou/article/details/94409943

Web前端技术专栏收录该内容

115 篇文章

订阅专栏

git项目地址:https://github.com/WangShuangshuang/promise

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise</title>
</head>
<body>
<section>
    <div>Name: <span id="name"></span></div>
    <div>Age: <span id="age"></span></div>
    <div>Sex: <span id="sex"></span></div>
</section>
<script src="index.js"></script>
</body>
</html>

index.js:

/**
 * Created by on 2019/7/1.
 */
const demo = {
    getName: function(){
        return new Promise(function(resolve, reject){
                setTimeout(function(){
                    resolve('Lily1');
                }, 1000);
            })
    },
    getAge: function(){
        return new Promise(function(resolve, reject){
                setTimeout(function(){

                    // 执行此句将导致本promise rejected, 则Promise.all的.then()不会执行
                    // reject('error!!');

                    resolve('18');
                }, 2000);
            })
    },
    getSex: function(){
        return new Promise(function(resolve, reject){
                setTimeout(function(){

                    // 执行此句将导致本promise rejected, 则Promise.all的.then()不会执行
                    // reject('error!!!');

                    resolve('Lady');
                }, 3000);
            })
    },

    displayOneByOne: function(){
        console.log('0', new Date().getSeconds());
        demo.getName()
            .then(function(name){
                console.log('1', new Date().getSeconds())
                document.getElementById('name').innerHTML = name;
                demo.getAge().then(function(age){
                    console.log('2', new Date().getSeconds())
                    document.getElementById('age').innerHTML = age;
                    demo.getSex().then(function(sex){
                        console.log('3', new Date().getSeconds())
                        document.getElementById('sex').innerHTML = sex;
                        console.log('finished.')
                    })
                })
             })
    },
    displayOnTheSameTime: function(){
        console.log('0', new Date().getSeconds());
        Promise.all([demo.getName(), demo.getAge(), demo.getSex()])
            .then(function(resArray){
                console.log('resArray', resArray);
                console.log('1', new Date().getSeconds());
                document.getElementById('name').innerHTML = resArray[0];
                document.getElementById('age').innerHTML = resArray[1];
                document.getElementById('sex').innerHTML = resArray[2];
            })
            .catch(function(errArray){
                // 将输出遇到的第一个reject消息
                console.log('errArray', errArray);

            })

    }
}

//demo.displayOneByOne();
demo.displayOnTheSameTime();