ES6——Promise

简介

Promise是解决异步编程的一种解决方案。

什么是异步？

已有函数A，A去执行一个步骤，A执行完，再执行B。

A -> B

这么一个过程就是异步。

如何异步编程？

第一种：回调函数

第二种：事件触发

而，Promise有别于以上两种。

回调 && Promise

回调

语法

定义
    A = function（B）{
    A函数部分；

    B函数部分；
    } 
调用
    A（自定义）

实例

模拟ajax一秒钟通信

let ajax = function(callback){
    console.log('执行');

    //一秒后执行
    setTimeout(function(){
        callback && callback.call()
    },1000)
};

ajax(function(){
    console.log('timeout1');  
})

运行结果

先打印出 执行

一秒后打印 timeout1

Promise

语法

new Promise(function(resolve,reject))

补充说明

resolve执行当前操作，reject中断当前操作，这两个参数也是函数。

Promise实例具有then方法，意思是执行下一步。

实例

模拟ajax一秒钟通信

let ajax = function(){
    console.log('执行2');

    //resolve执行当前操作，reject中断当前操作
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve()
        },1000)
    })
};

//执行
//上面提到ajax会返回一个实例对象，这个实例对象具有then方法——执行下一步
           // ↓↓这里的function就是resolve
ajax().then(function(){                                
    console.log('timeout2');
 // ↓↓这里的function就是reject   
},function(){})

运行结果

先打印出 执行2

一秒后打印 timeout2

Promise基本用法

多步

和上面一样，ajax()结束过后，继续返回一个Promise对象，使用then即可。

实例

    //多步
    //第一步
    let ajax = function(){
        console.log('执行3');
        //resolve执行当前操作，reject中断当前操作
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve()
            },1000)
        })
    };

    //第二步
    //ajax继续返回一个Promise实例对象，ajax完了以后，继续使用then
    ajax()
        .then(function(){
        console.log('timeout-1');
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve()
            },2000)
        });
    })
        //第三步
        .then(function(){
        console.log('timeout-2');
    })

运行结果

先打印出 执行2

一秒后打印 timeout-1

再过一秒后打印 timeout-2

错误捕获

使用catch关键字

实例

let ajax = function(num){
        console.log('执行4');
        return new Promise(function(resolve,reject){
            //判断
            if(num>5){
                resolve()
            }
            else{
                throw new Error('出错了')
            }
        })
    }
    //调用
    ajax(3).then(function(){
        console.log('log',3);
    })
        //捕获错误
        .catch(function(err){
        console.log('catch',err);
    });

运行结果

先是打印出错了,

后面跟着 错误信息

Promise高级用法

Promise.all()

所有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(err){
                reject(err);
            }
        })
    }

    //显示图片（添加到页面）
    function showImgs(imgs){
        imgs.forEach(function(img){
            document.body.appendChild(img);
        })
    }

    //all()把多个promise实例合并为一个
    Promise.all([
    loadImg('xxx.jpg'),
    loadImg('xxx2.jpg'),
    loadImg('xxx3.jpg'),
    ]).then(showImgs)

Promise.race()

和all相反，有一个状态发生改变就行，只执行一项。

//哪张图片先加载完，就显示到页面

 Promise.race([
    loadImg('xxx.jpg'),
    loadImg('xxx2.jpg'),
    loadImg('xxx3.jpg'),
    ]).then(showImgs)