ES6之Promise对象

异步

即：先A后B
传统方法：1.回调 2.事件触发

传统方法

let ajax = function(callback){    setTimeout(function() {        callback&&callback.call();    }, 500);}ajax(function(){    console.log('hello')})

同样的案例用promise怎么写呢？

let ajax = function(){   console.log('执行2');    // 返回一个对象，这个对象就是一个promise实例    return new Promise(function(resolve,reject){          setTimeout(function(){            resolve();        },1000)    })}//ajax运行后返回一个promise实例，具有.then方法,表示执行下一步。then的函数体就是下一步ajax().then(function(){    console.log('promise','timeout2');})

Promise的作用

　　相比较而言，结果上一模一样。但是ES6具有更好的可读性、可维护性。

Promise的基本用法

Promise.all

把多个Promise实例当做一个promise实例。
含义：all下面是个数组，数组传递进来多个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);        })    }    Promise.all([        loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),        loadImg('http://i4.buimg.com/567571/2b07ee25b08930ba.png'),        loadImg('http://i2.muimg.com/567571/5eb8190d6b2a1c9c.png')    ]).then(showImgs)

执行结果：

如果有一个图片正在加载中，这三个图片就都不会显示！

Promise.race

有一个实例的状态改变，就触发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){        let p = document.createElement('p');        p.appendChild(img);        document.body.appendChild(p);    }    Promise.race([        loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),        loadImg('http://i4.buimg.com/567571/2b07ee25b08930ba.png'),        loadImg('http://i2.muimg.com/567571/5eb8190d6b2a1c9c.png')    ]).then(showImgs)