ES6 Promise使用介绍

1、什么是Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

这么说可能不够直观的理解，看下面的两个例子

　　　　// callback回调函数

        function getCallback(n,callback) {

            setTimeout(() => {

                var num = 2*n

                console.log('num',num)

                callback(num)

            },2000)

        }

        getCallback(3,function callback(n) {

            console.log('n',n)

        })

        // Promise函数的基础用法(等同于上面的回调函数)

        function runPro(n){

            let p = new Promise((resolve,reject) => {

                setTimeout(() => {

                    var num = 2*n

                    console.log('num',num)

                    resolve(num)

                },2000)

            })

            return p

        }

        runPro(3).then((res) => {

            console.log('res',res)

        })

这么看是不是觉得Promise并没有什么特别的，而且还要费劲封装，有这功夫用回调函数就好了，那么在看下面的例子

　　　　// 三层callback回调函数（传说的回调地狱）

        function getCallback0(n,callback1) {

            setTimeout(() => {

                var num0 = 2*n

                console.log('num0',num0)

                callback1(num0,function callback2(params,callback3) {

                    let num2 = params + 1

                    console.log('num2',num2)

                    callback3(num2)

                })

            },2000)

        }

        getCallback0(3,function callback1(n,callback2) {

            let num1 = n+1

            console.log('num1',num1)

            callback2(num1,function callback3(params) {

                    let num3 = params + 1

                    console.log('num3',num3)

                }

            )

        })

        // 三层Promise(等同于上面的回调函数)

        function runPro0(n){

            let p = new Promise((resolve,reject) => {

                setTimeout(() => {

                    var num0 = n*2

                    console.log('num0',num0)

                    resolve(num0)

                },2000)

            })

            return p

        }

        runPro0(3)

        .then((res) => {

            // console.log('res',res)

            let Pro1 = new Promise((resolve,reject) =>{

                var num1 = res+1

                console.log('num1',num1)

                resolve(num1)

            })

            return Pro1

        })

        .then((res) =>{

            // console.log('res',res)

            let Pro2 = new Promise((resolve,reject) =>{

                var num2 = res+1

                console.log('num2',num2)

                resolve(num2)

            })

            return Pro2

        })

        .then((res) =>{

            var num3 = res+1

            console.log('num3',num3)

　　　　　　　　// 如果需要可以继续回调

        })

通过上面的对比可以很清除的看出，用Promise处理异步事件更加简洁直观

2、基础用法

　　　　　const p = new Promise(function(resolve,reject){

            if(success){

                resolve('成功的结果')

            }else{

                reject('失败的结果')

            }

        })

        p.then(function (res) {

            // 接收resolve传来的数据，做些什么

        },function (err) {

            // 接收reject传来的数据，做些什么

        })

        p.catch(function (err) {

            // 接收reject传来的数据或者捕捉到then()中的运行报错时，做些什么

        })
　　　　　p.finally(function(){
　　　　　　// 不管什么状态都执行
　　　　　})

3、Promise的相关方法

　　　　 Promise.prototype.then()

        Promise.prototype.catch()

        Promise.prototype.finally()

        Promise.resolve()

        Promise.reject()

        Promise.all()

        Promise.race()

由代码可以看出.then() .catch() .finally()都是定义在原型对象上的

4、then 的用法

由上面的基础用法代码可以看出.then()接收两个参数，第一个是resolved状态的回调函数，第二个是rejected状态的回调函数

5、catch的用法

.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

6、finally的用法

.finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

7、all的用法

Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。那么，三个异步操作返回的数据哪里去了呢？都在then里面呢，all会把所有异步操作的结果放进一个数组中传给then。

（1）只有getNumber1、getNumber2、getNumber3的状态都变成fulfilled，Promise的状态才会变成fulfilled，此时getNumber1、getNumber2、getNumber3的返回值组成一个数组，传递给Promise的回调函数。

（2）只要getNumber1、getNumber2、getNumber3之中有一个被rejected，Promise的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给Promise的回调函数。

　　　　　function getNumber1(){

            var p = new Promise(function(resolve, reject){

                setTimeout(function(){

                    console.log('1')

                    resolve('随便什么数据1');

                }, 1000);

            });

            return p;

        }

        function getNumber2(){

              var p = new Promise(function(resolve, reject){

                setTimeout(function(){

                    console.log('2')

                    reject('随便什么数据2');

                }, 2000);

            });

            return p;

        }

        function getNumber3(){

              var p = new Promise(function(resolve, reject){

                setTimeout(function(){

                    console.log('3')

                    reject('随便什么数据3');

                }, 3000);

            });

            return p;

        }

        Promise.all([getNumber1(),getNumber2(),getNumber3()])

        .then(function(res){

            console.log('res',res)

            console.log('res',res[2].data)

        },function (err){

            console.log('err',err)

        })

        .catch(function(err2){

            console.log('err2',err2)

        })

8、race的用法

Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

不过只要getNumber1、getNumber2、getNumber3之中有一个实例率先改变状态，Promise的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给Promise的回调函数。

注意：

1、Promise定义后就执行，所以通常用函数进行分装

2、Promise.all()中的参数是以一个数组传入的

巴特西

ES6 Promise使用介绍

最新文章

热门文章