ES6新特性使用小结（六）

十三、promise　　异步编程

 

①、使用 promise 模拟异步操作

{   //ES5 中的 callback 解决 异步操作问题
    let ajax = function (callback) {
        console.log('执行');
        setTimeout(function () {
            callback && callback.call();
        }, 1000)
    };
    ajax(function () {
        console.log('timeout1');        // '执行'     1s 后输出  ‘timeout1’;
    })
}



{   //使用Promise 模拟负责异步操作
    let ajax = function () {
        console.log('aaa');
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve();
            }, 1000)
        })
    };

    ajax()
        .then(function () {
            console.log('bbb');
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    resolve()
                }, 2000)
            })
        })
        .then(function () {
            console.log('ccc');
        })
}

 

②、promise 异常信息捕获

{  
    let ajax = function (num) {
        console.log('执行');
        return new Promise(function (resolve, reject) {
            if (num > 5) {
                resolve();
            } else {
                throw Error('出错啦');
            }
        })
    }
    ajax(6).then(function () {
        console.log('log', 6)
    }).catch(function (err) {
        console.log('catch', err);
    });
    //  执行      'log',6
    ajax(3).then(function () {
        console.log('log', 3)
    }).catch(function (err) {
        console.log('catch', err);
    });
    //  执行        catch Error: 出错啦
}

 

③、promise使用场景DEMO     　　　　所有图片加载完毕后在添加到页面

/*
*   Promise.all 方法
*                   把多个Promise 实例 当成一个 Promise 实例
*                   当所有的 Promise 实例状态发生改变的时候 ，新的Promise才会跟着发生变化
* */

{   
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement('img');
            img.src = src;
            img.onload= function () {
                resolve(img);
            };
            img.onerror= function () {
                reject(err)
            }
        })
    }

    function showImgs (imgs){                            //三张图片作为一个实例
        imgs.forEach(img=>document.body.appendChild(img))
    }

  
    Promise.all([
        loadImg('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3380917023,2961192652&fm=27&gp=0.jpg'),
        loadImg('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3380917023,2961192652&fm=27&gp=1.jpg'),
        loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506432814385&di=26b606406cd0c7f50bac0c11c0d1a561&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201602%2F01%2F20160201065848_RUYHk.thumb.700_0.jpeg')
    ]).then(showImgs)
    /*
    *   三张图片所以的状态发生改变后，才会触发 Promise.all 返回一个实例触发 .then
    * */
}

 

④、promise 使用场景二　　　　　　三张图片同时加载 ，只要有一个图片加载完就添加到页面

/*
*   Promise.race   方法
*               　　　　 在多个实例中，有一个状态率先改变，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 () {
                reject(err)
            }
        })
    }

    function showImg(img){
        let p = document.createElement('p');
        p.appendChild(img);
        document.body.appendChild(p);
    }
   
    Promise.race([
        loadImg('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3380917023,2961192652&fm=27&gp=0.jpg'),
        loadImg('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3380917023,2961192652&fm=27&gp=1.jpg'),
        loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506432814385&di=26b606406cd0c7f50bac0c11c0d1a561&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201602%2F01%2F20160201065848_RUYHk.thumb.700_0.jpeg')
    ]).then(showImg)
}