ES6中的Promise相关知识简述

最新推荐文章于 2025-05-13 10:42:55 发布

charlene程程

最新推荐文章于 2025-05-13 10:42:55 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： nodeJS 文章标签： promise

本文链接：https://blog.youkuaiyun.com/charlene0824/article/details/51712074

nodeJS 专栏收录该内容

13 篇文章

订阅专栏

Promise是抽象异步处理对象以及对其进行各种操作的组件。它把异步处理对象和处理规则进行规范化，并按照采用统一的接口来编写，而采用规定方法之外的写法都会出错。
ES6原生提供了Promise对象。我们来看一下Promise的用法

promise用法

首先创建一个promise对象，创建promise对象的流程如下
1 new Promise（fn）返回一个promise对象，fn中传递两个参数，分别为resolve和reject
2 在fn中根据不同的情况条用resolve和reject：处理结果正常的话调用resolve(处理结果值)，处理结果错误的话调用reject(Error对象)

var promise = new promise(function(resolve,reject){
    if(//异步操作成功){
        resolve(value);
    }else{
        reject(error);
    }
})

promise.then(function(value){
    //success
},function(value){
    //failure
})

上述代码中，Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve方法和reject方法。这里需要说明一下promise对象的状态。promise只有三种状态，分别为未完成态、完成态和失败态。这三种状态的变化时不可逆的，不能强制修改的，未完成态可以转变为完成态或失败态，而完成态和失败态不能转变为未完成态，并且完成态和失败态之间不能相互转化。当promise对象由未完成态转变为完成态时，执行resolve函数；当promise对象由未完成态转变为失败态时，执行reject函数。
下面是利用promise实现三个球的连续运动

<style type="text/css">
    .ball{
        margin-left:0;
        width:40px;
        height:40px;
        border-radius:20px;
    }
    .ball1{
        background:red;
    }
    .ball2{
        background:yellow;
    }
    .ball3{
        background:green;
    }

</style>

<body>
<div class="ball ball1" style='margin-left:0'></div>
<div class="ball ball2" style='margin-left:0'></div>
<div class="ball ball3" style='margin-left:0'></div>

<script type="text/javascript">
    var ball1 = document.querySelector('.ball1');
    var ball2 = document.querySelector('.ball2');
    var ball3 = document.querySelector('.ball3');

    function promiseAnimate(ball,distance){
    return new Promise(function(resolve,reject){
        function _animate(){
            setTimeout(function(){
                var marginLeft = parseInt(ball.style.marginLeft,10);
                if(marginLeft === distance){
                    resolve() 
                } else{
                    if(marginLeft < distance){
                        marginLeft++;
                    }else{
                        marginLeft--;
                    }
                    ball.style.marginLeft = marginLeft + 'px';
                    _animate();
                }
            },13)
        }

        _animate();
    })
}
    promiseAnimate(ball1,100).then(function(){
        return promiseAnimate(ball2,200);
    })
    .then(function(){
        return promiseAnimate(ball3,300);
    })
    .then(function(){
        return promiseAnimate(ball3,150);
    })
    .then(function(){
        return promiseAnimate(ball2,150);
    })
    .then(function(){
        return promiseAnimate(ball1,150);
    })

promise中的then方法返回的仍是promise对象，所以可以对promise进行链式操作

promise.all()和promise.race()

promise.all()方法用于将多个promise实例，包装成一个新的promise实例，接收一个数组作为参数，每个数组的项都是promise的实例，而且promise最终返回的状态由数组中每一项的状态决定。只有所有项返回的都是完成态，promise.all()返回的才是完成态，只要其中有一个为失败态，promise.all()返回的是失败态。promise.all()可以让数组中的promise同时执行
比如将上面动画改为三个球同时运动，可以写为：

Promise.all(promiseAnimate(ball1,100),promiseAnimate(ball2,200),promiseAnimate(ball3,300),function(){
    console.log('success');
})

promise.race()方法同样将多个Promise实例包装成一个新的Promise实例

var p = Promise.race([p1,p2,p3]);

上面代码中，只要p1,p2,p3中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的回调函数。

promise相关知识：promise实例的then方法的参数为函数，第一个函数是promise实例中调用resolve时执行的函数，第二个函数是promise实例中调用reject时执行的函数。