Promise对象学习笔记

如何设置a执行完再执行b

回调
事件触发
Promise

Promise是用来解决异步操作问题的。

Promise含义

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果
promise 是一个对象，从它可以获取异步操作的消息
Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise</title>
</head>
<body>
<script>
//es5中的回调
//回调的写法复杂,代码的复杂影响了后期的维护
{
    let ajax = function (callback) {
        console.log('carry out');

        setTimeout(() => {
            callback && callback();
        }, 1000);
    }

    ajax(function () {
        console.log('timeout and callback');
    });
    //carry out
    //timeout and callback
}

//上面的代码用Promise的写法
//返回一个实例,这个实例具有then方法,执行下一步的功能
// resolve要执行下步的操作
// reject要中断当前操作
{
    let ajax = function () {
        console.log('carry out1');
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve();                
            }, 1000);
        });
    }

    ajax().then(function () {
        console.log('promise carryout');
    });
    //carry out1
    //promise carryout
}

//多步调用的场景
{
    let ajax = function () {
        console.log('carry out2');
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve();                
            }, 1000);
        });
    }

    ajax()
        .then(function () {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve()
                }, 1000);
            });
        })
        .then(function () {
            console.log('promise carryout2');
        });
        //可以不断得向下写
    //carry out2
    //promise carryout
    //promise carryout2
}

//捕获错误
{
    let ajax = function (num) {
        console.log('carry out3');
        return new Promise((resolve, reject) => {
            if (num > 5) {
                resolve();
            } else {
                throw Error('出错了,num不大于5');
            }
        });
    }

    ajax(6)
        .then(() => {
            console.log(6);
        }).catch((err) => {
            console.log(err);
        });
    
    ajax(3)
        .then(() => {
            console.log(3);
        }).catch((err) => {
            console.log(err);
        });
    //出错了,num不大于5
}
</script>
</body>
</html>

Promise.all() Promise.race()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise</title>
</head>
<body>
<script>
//Promise.all() and Promise.race()
//所有图片加载完再添加到页面
{
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement('img');
            img.src = src;
            img.onload = function () {
                resolve(img);
            };
            img.onerror = function (err) {
                reject(err);
            }
        });
    }

    function showImgs(imgs) {
        imgs.forEach(function (item) {
            document.body.appendChild(item);
        });
    }
    
    Promise.all([
        loadImg('https://static.easyicon.net/preview/122/1225468.gif'),
        loadImg('https://static.easyicon.net/preview/121/1219130.gif'),
        loadImg('https://static.easyicon.net/preview/120/1209057.gif')
    ]).then(showImgs);
}

//Promise.race()
//有一个图片加载完就加载到页面上
{
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement('img');
            img.src = src;
            img.onload = function () {
                resolve(img);
            };
            img.onerror = function (err) {
                reject(err);
            }
        });
    }

    function showImgs(img) {
        document.body.appendChild(img);        
    }
    
    Promise.race([
        loadImg('https://static.easyicon.net/preview/122/1225468.gif'),
        loadImg('https://static.easyicon.net/preview/121/1219130.gif'),
        loadImg('https://static.easyicon.net/preview/120/1209057.gif')
    ]).then(showImgs);
}
</script>
</body>
</html>

Promise对象学习笔记