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就是resolveajax().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)