欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

这次聊聊Promise对象

程序员文章站 2023-10-15 18:02:24
欢迎大家前往 "腾讯云+社区" ,获取更多腾讯海量技术实践干货哦~ 本文由 "前端林子" 发表于 "云+社区专栏" Promise是CommonJS提出的一种规范,在ES6中已经原生支持Promise对象,非ES6环境可以用Bluebird等库来支持。 0.引入 在js中任务的执行模型有两种:同步模 ......

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~

本文由发表于云+社区专栏

promise是commonjs提出的一种规范,在es6中已经原生支持promise对象,非es6环境可以用bluebird等库来支持。

0.引入

在js中任务的执行模型有两种:同步模式和异步模式。

同步模式:后一个任务b等待前一个任务a结束后,再执行。任务的执行顺序和任务的排序顺序是一致的。

异步模式:每一个任务有一个或多个回调函数,前一个任务a结束后,不是执行后一个任务b,而是执行任务a的回调函数。而后一个任务b是不等任务a结束就执行。任务的执行顺序,与任务的排序顺序不一致。

异步模式编程有四种方法:回调函数(最基本的方法,把b写成a的回调函数)、事件监听(为a绑定事件,当a发生某个事件,就执行b)、发布/订阅,以及本文要介绍的promise对象。

promise是一个用于处理异步操作的对象,可以将回调函数写成链式调用的写法,让代码更优雅、流程更加清晰,让我们可以更合理、更规范地进行异步处理操作。它的思想是,每一个异步任务返回一个promise对象,该对象有一个then方法,允许指定回调函数。

1.promise的基本知识

1.1 三种状态

pending:进行中,刚创建一个promise实例时,表示初始状态;

resolved(fulfilled):resolve方法调用的时候,表示操作成功,已经完成;

rejected:reject方法调用的时候,表示操作失败;

1.2 两个过程

这三种状态只能从pendeng-->resolved(fulfilled),或者pending-->rejected,不能逆向转换,也不能在resolved(fulfilled)和rejected之间转换。并且一旦状态改变,就不会再改变,会一直保持这个结果。

汇总上述,创建一个promise的实例是这样的:

//创建promise的实例
let promise = new promise((resolve,reject)=>{
    //刚创建实例时的状态:pending

    if('异步操作成功'){
        //调用resolve方法,状态从pending变为fulfilled
        resolve();
    }else{
        //调用reject方法,状态从pending变为rejected
        reject();
    }
});

1.3 then()

用于绑定处理操作后的处理程序,分别指定fulfilled状态和rejected状态的回调函数,即它的参数是两个函数,第一个用于处理操作成功后的业务,第二个用于处理操作失败后的业务。

//then()
promise.then((res)=> {
    //处理操作成功后的业务(即promise对象的状态变为fullfilled时调用)
},(error)=> {
    //处理操作失败后的业务(即promise对象的状态变为rejected时调用)
});

1.4 catch()

用于处理操作异常的程序,catch()只接受一个参数

//catch()
promise.catch((error)=> {
    //处理操作失败后的业务
});

一般来说,建议不要在then()里面定义rejected状态的回调函数,而是将then()用于处理操作成功,将catch()用于处理操作异常。因为这样做可以捕获then()执行中的错误,也更接近同步中try/catch的写法:

//try-catch
// bad
promise.then((res)=> {
    //处理操作成功后的业务
  }, (error)=> {
    //处理操作失败后的业务
  });

// good
promise
  .then((res)=> { 
    //处理操作成功后的业务
  })
  .catch((error)=> {
    //处理操作失败后的业务
  });

1.5 all()

接受一个数组作为参数,数组的元素是promise实例对象。只有当参数中的实例对象的状态都为fulfilled时,promise.all( )才会有返回。

实例代码(可直接在浏览器中打开):

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>promise实例</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = () => {
            //创建实例promise1
            let promise1 = new promise((resolve) => {
                settimeout(() => {
                    resolve('promise1操作成功');
                    console.log('1')
                }, 3000);
            });

            //创建实例promise1
            let promise2 = new promise((resolve) => {
                settimeout(() => {
                    resolve('promise1操作成功');
                    console.log('2')
                }, 1000);
            });


            promise.all([promise1, promise2]).then((result) => {
                console.log(result);
            });
        }
    </script>
</head>

<body>
    <div></div>
</body>

</html>

结果(注意看时间):

这次聊聊Promise对象promise.all()

代码说明:

1s后,promise2进入fulfilled状态,间隔2s,也就是3s后,promise1也进入fulfilled状态。这时,由于两个实例都进入了fulfilled状态,所以promise.all()才进入了then方法。

使用场景:执行某个操作需要依赖多个接口请求回的数据,且这些接口之间不存在互相依赖的关系。这时使用promise.all(),等到所有接口都请求成功了,它才会进行操作。

1.6 race()

和all()的参数一样,参数中的promise实例,只要有一个状态发生变化(不管是成功fulfilled还是异常rejected),它就会有返回,其他实例中再发生变化,它也不管了。

实例代码(可直接在浏览器中打开):

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>promise实例</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = () => {
            //创建实例promise1
            let promise1 = new promise((resolve) => {
                settimeout(() => {
                    resolve('promise1操作成功');
                    console.log('1')
                }, 3000);
            });

            //创建实例promise1
            let promise2 = new promise((resolve, reject) => {
                settimeout(() => {
                    reject('promise1操作失败');
                    console.log('2')
                }, 1000);
            });


            promise.race([promise1, promise2])
                .then((result) => {
                    console.log(result);
                })
                .catch((error) => {
                    console.log(error);
                })
        }
    </script>
</head>

<body>
    <div></div>
</body>

</html>

结果(注意看时间):

这次聊聊Promise对象promise.race()

代码说明:

1s后,promise2进入rejected状态,由于一个实例的状态发生了变化,所以promise.race()就立刻执行了。

2 实例

平时开发中可能经常会遇到的问题是,要用ajax进行多次请求。例如现在有三个请求,请求a、请求b、请求c。请求c要将请求b的请求回来的数据做为参数,请求b要将请求a的请求回来的数据做为参数。

按照这个思路,我们可能会直接写出这样的层层嵌套的代码:

//------请求a 开始---------
    $.ajax({
        success:function(res1){


            //------请求b 开始----
            $.ajax({
                success:function(res2){


                    //----请求c 开始---
                    $.ajax({
                        success:function(res3){
                        }
                    });
                    //---请求c 结束---


                }    
            });
            //------请求b 结束-----


        }
    });
    //------请求a 结束---------

在请求a的success后,请求b发送请求,在请求b 的success后,请求c发送请求。请求c结束后,再向上到请求b结束,请求b结束后,再向上到请求a结束。

这样虽然可以完成任务,但是代码层层嵌套,代码可读性差,也不便于调试和后续的代码维护。而如果用promise,你可以这样写(示意代码,无ajax请求):

此处附上完整可执行代码,可在浏览器的控制台中查看执行结果:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>promise实例</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        window.onload = () => {
            let promise = new promise((resolve, reject) => {

                if (true) {
                    //调用操作成功方法
                    resolve('操作成功');
                } else {
                    //调用操作异常方法
                    reject('操作异常');
                }
            });

            //then处理操作成功,catch处理操作异常
            promise.then(requesta)
                .then(requestb)
                .then(requestc)
                .catch(requesterror);

            function requesta() {
                console.log('请求a成功');
                return '下一个是请求b';
            }
            function requestb(res) {
                console.log('上一步的结果:' + res);
                console.log('请求b成功');
                return '下一个是请求c';
            }
            function requestc(res) {
                console.log('上一步的结果:' + res);
                console.log('请求c成功');
            }
            function requesterror() {
                console.log('请求失败');
            }
        }
    </script>
</head>

<body>
    <div></div>
</body>

</html>

结果如下:

这次聊聊Promise对象实例

可以看出请求c依赖请求b的结果,请求b依赖请求a的结果,在请求a中是使用了return将需要的数据返回,传递给下一个then()中的请求b,实现了参数的传递。同理,请求b中也是用了return,将参数传递给了请求c。

3.小结

本文主要介绍了promise对象的三个状态和两个过程。“三个状态”是:初始化、操作成功、操作异常,“两个过程”是初始化状态到操作成功状态,和初始化状态到操作异常状态。除此之前,还有两种实例方法:then()、catch()来绑定处理程序。类方法:promise.all()、promise.race()。如有问题,欢迎指正。

相关阅读
【每日课程推荐】机器学习实战!快速入门在线广告业务及ctr相应知识

此文已由作者授权腾讯云+社区发布,更多原文请点击

搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!

海量技术实践经验,尽在云加社区