ES6-Promise

深碍√TFBOYSˉ_ 2022-06-08 11:08 458阅读 0赞

# **Promise** #

## **what?** ##

在我看来**Promise**就相当于一个承诺容器，将所要执行的事件存贮在promise容器中。  
Promise在ES6中被统一规范，由浏览器直接支持。

ES6语法中说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。

首先测试一下浏览器是否支持Promise:

new Promise (function(){ });
    //测试
    alert('support Promise!')

### Promise的特点： ###

*  对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：  
    \- Pending(进行中)  
    \- Fulfilled(已成功)  
    \- Rejected(已失败)
 *  一旦状态改变，就不会在变，任何时刻都会得到这个结果。  
    \- 状态改变只有两种
    
        Pending——Fulfilled
                 Pending——Rejected

## **How?** ##

ES6规定，Promise对象是一个构造函数，用来生成Promise实例：

Promise接受一个函数作为参数，函数的参数分别为resolve和reject.

*  **resolve**函数作用：将Promise对象的状态从“未完成”变为“成功”，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去;
 *  **reject**函数作用：将Promise对象的状态从“未完成”变为“失败”，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别制定Resolved状态和Rejected状态的回调函数。

**example:**

new Promise(function (resolve, reject) { 
        log('start new Promise...');
        var timeOut = Math.random() * 2;
        log('set timeout to: ' + timeOut + ' seconds.');
        setTimeout(function () { 
            if (timeOut < 1) { log('call resolve()...'); resolve('200 OK'); }
            else { log('call reject()...'); reject('timeout in ' + timeOut + ' seconds.'); }
        }, timeOut * 1000);
    }).then(function (r) { 
        log('Done: ' + r);
    }).catch(function (reason) { 
        log('Failed: ' + reason);
    });

timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果，过了指定时间(f参数)以后，Promise实例的状态变为Resolved，就会触发then方法绑定的回调函数。

可见：Promsie最大的好处就是在异步执行的流程中，把执行代码和处理结果的代码清晰的分离出来。

![这里写图片描述][SouthEast]

**Promise功能很多，如果有若干个异步任务，需要先做任务1,如果成功，在做任务2，如果中间任何一个任务失败，才不继续进行执行处理函数**  
要串行执行这样的异步任务，就可以写成

obj1.**then**(obj2).**then**(obj3).**catch**(handleError) 其中obj1、obj2和obj3都是Promise对象。

**example**

// 0.5秒后返回input*input的计算结果:
    function multiply(input) { 
        return new Promise(function (resolve, reject) { 
            log('calculating ' + input + ' x ' + input + '...');
            setTimeout(resolve, 500, input * input);
        });
    }
    
    // 0.5秒后返回input+input的计算结果:
    function add(input) { 
        return new Promise(function (resolve, reject) { 
            log('calculating ' + input + ' + ' + input + '...');
            setTimeout(resolve, 500, input + input);
        });
    }
    
    var p = new Promise(function (resolve, reject) { 
        log('start new Promise...');
        resolve(123);
    });
    
    p.then(multiply)
     .then(add)
     .then(multiply)
     .then(add)
     .then(function (result) { 
        log('Got value: ' + result);
    });

结果：

Log:
    
    start new Promise...
    
    calculating 123 x 123...
    
    calculating 15129 + 15129...
    
    calculating 30258 x 30258...
    
    calculating 915546564 + 915546564...
    
    Got value: 1831093128

--------------------

如果我们组合使用Promise，就可以把很多异步任务以并行和串行的方式组合起来执行。

参考文章：[https://www.liaoxuefeng.com/wiki/][https_www.liaoxuefeng.com_wiki]  
[http://www.jianshu.com/p/dead52af185b][http_www.jianshu.com_p_dead52af185b]

[SouthEast]: /images/20220608/51a45153501e49bc8cb8db6d2b48e987.png
[https_www.liaoxuefeng.com_wiki]: https://www.liaoxuefeng.com/wiki/
[http_www.jianshu.com_p_dead52af185b]: http://www.jianshu.com/p/dead52af185b