ES6 promise部分方法简介

一.概述

是异步编程的一种解决方案。
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

二.特点

Promise 对象有两个特点：
1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：

（1）pending：初始值

（2）fulfilled：操作成功

（3）rejected：操作失败

只有异步操作的结果可以决定当前是哪一个状态，任何其他状态都无法改变这个状态。

2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。

Promise对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected 。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。

注：Promise 一旦新建就会「立即执行」，无法取消（new Promise() 里的函数会自动运行）。

三.Promise 方法

Promise 除了拥有自身的 all、race、resolve、reject 等方法外，在原型上还拥有 then、catch 方法。
例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        function promiseStart(){
            var c = new Promise(function(resolve, reject){
                //做一些异步操作
                setTimeout(function(){
                    console.log('代码执行完成');
                    resolve('回调数据');
        　　　　　　　reject('回调数据失败');
                }, 1000);
            });
            return c;
        }
        promiseStart();
    </script>
</html>

控制台显示：

1.png

　　当执行 promiseBegin 函数时，会得到一个 Promise 对象，在 Promise 的构造函数中，我们执行了一个setTimeout异步操作，1秒后，输出“代码执行完成”，并且调用resolve方法。

Promise.prototype.then() 方法：

then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。

Promise.prototype.then() 方法特点

在 JavaScript 事件队列的当前运行完成之前，回调函数永远不会被调用。
列如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        const a = new Promise(function(resolve,reject){
          resolve('success');
        });
         
        a.then(function(value){
          console.log(value);
        });
         
        console.log('first');
    </script>
</html>

控制台打印：

2.png

Promise.prototype.catch() 方法：

用于指定发生错误时的回调函数。
列如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        const promise = new Promise(function(resolve, reject) {
          throw new Error('test');
        });
        promise.catch(function(error) {
          console.log(error);
        });
    </script>
</html>

控制台打印：

3.png

上面代码中，promise抛出一个错误，就被catch()方法指定的回调函数捕获。

Promise.all()方法

用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);
上面代码中，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例

Promise.race()方法

是将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.race([p1, p2, p3]);
上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

Promise.resolve()方法

有时需要将现有对象转为 Promise 对象，Promise.resolve()方法就起到这个作用。

const jsPromise = Promise.resolve($.ajax('/whatever.json'));
上面代码将 jQuery 生成的deferred对象，转为一个新的 Promise 对象。
Promise.resolve方法的参数分成四种情况。
（1）参数是一个 Promise 实例。
（2）参数是一个thenable对象。
（3）参数不是具有then方法的对象，或根本就不是对象。
（4）不带有任何参数。

Promise.reject() 方法

会返回一个新的 Promise 实例，该实例的状态为rejected。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        const p = Promise.reject('出错了');
        // 等同于
        const p = new Promise((resolve, reject) => reject('出错了'))
        
        p.then(null, function (s) {
          console.log(s)
        });
    </script>
</html>

控制台打印：报错了

4.png

上面代码生成一个 Promise 对象的实例p，状态为rejected，回调函数会立即执行。

注意，Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

好了以上就是promise部分方法。