ES6的Promise对象的使用

清疚 2024-04-18 07:18 75阅读 0赞

`Promise`对象，`ES6`新增的一个全新特性，虽然它出现很久了，`but`我相信，有很多的小伙伴还是没有怎么用过，今天让我们来好好的学习一下它。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70][]

### 1、Promise 的含义 ###

所谓`Promise`，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个`异步操作`）的结果。从语法上说，`Promise` 是一个对象，从它可以获取异步操作的消息。

在日常开发中，经常需要用到`ajax`请求数据，拿到数据后，再进行一些处理,完成一些复杂的交互效果。

假如你需要用ajax进行多次请求，而且，每次请求都依赖上一次请求返回的数据来作为参数，然后继续发出请求，你写成这样，**场景还原**：

$.ajax({ 
        success:function(res1){ 
            $.ajax({ 
                success:function(res2){ 
                    $.ajax({ 
                        success:function(res3){ 
                        }
                    });
                }    
            });
        }
    });

可能会有更多的嵌套，如此一层一层的执行，**无疑是消耗了更多的等待时间**，而且多个请求之间如果有先后关系的话，就会出现**回调地狱**，ES6想了办法整治这种情况，这时候`Promise` 诞生了。

所以我们知道了 `Promise` 是异步编程的一种解决方案，比传统的回调函数和事件更合理和强大。

`Promise`对象有以下**两个特点**:

>  *  对象的状态不受外界影响。`Promise`对象代表一个异步操作，有三种状态：`pending`（进行中）、`fulfilled`（已成功）和`rejected`（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 `Promise` 这个名字的由来。
>  *  一旦状态改变，就不会再变，任何时候都可以得到这个结果。`Promise`对象的状态改变，只有两种可能：从`pending`变为`fulfilled`和从`pending`变为`rejected`。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 `resolved`（已定型）。如果改变已经发生了，你再对`Promise`对象添加回调函数，也会立即得到这个结果。

有了`Promise`对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的**回调地狱**。

有好就有坏，`Promise`也有一些**缺点**。1、首先，无法取消`Promise`，一旦新建它就会立即执行，无法中途取消。2、其次，如果不设置回调函数，`Promise`内部抛出的错误，不会反应到外部。3、当处于`pending`状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

#### Promise 的基本用法 ####

### 2、Promise 的基本用法 ###

接下来，我们就看看它的基本用法：

const promise = new Promise(function(resolve, reject) { 
      
    });

`Promise` 对象是**全局对象**，你也可以理解为一个类，创建`Promise`实例的时候，要有那个`new`关键字。`Promise`构造函数接受一个函数作为参数，其中有两个参数：`resolve` 和`reject`，两个函数均为方法。`resolve`方法用于处理异步操作成功后业务(即从 `pending` 变为 `resolved`)。`reject`方法用于操作异步操作失败后的业务(即从 `pending` 变为 `rejected`)。在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

#### Promise 的三种状态 ####

上面也提到了，`Promise` 对象有三种状态：

*  1、**pending**：刚刚创建一个 `Promise` 实例的时候，表示初始状态;
 *  2、**fulfilled**：`resolve` 方法调用的时候，表示操作成功;
 *  3、**rejected**：`reject` 方法调用的时候，表示操作失败;

![20190903164621572.jpg][]

下面代码创造了一个`Promise`实例。

初始化实例后，对象的状态就变成了`pending`；当`resolve`方法被调用的时候，状态就会由`pending`变成了成功`fulfilled`；当`reject`方法被调用的时候，状态就会由`pending`变成失败`rejected`。

`Promise`实例生成以后，可以用`then()`方法分别指定`resolved`状态和`rejected`状态的回调函数，用于绑定处理操作后的处理程序。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70 1][]

看以下操作：

promise.then(function(value) { 
      // 操作成功的处理程序
    }, function(error) { 
      // 操作失败的处理程序
    });

`then()`方法可以接受两个回调函数作为参数。第一个回调函数是`Promise`对象的状态变为`resolved`时调用，第二个回调函数是`Promise`对象的状态变为`rejected`时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受`Promise`对象传出的值作为参数。

说简单点就是参数是两个函数，**第一个用于处理操作成功后的业务，第二个用于处理操作异常后的业务**。

![format_png][]

举一个**Promise**对象的简单例子。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70 2][]

上面代码中，`timeout()`方法返回一个`Promise`实例，表示一段时间以后才会发生的结果。过了指定的时间（`ms`参数）以后，`Promise`实例的状态变为`resolved`，就会触发`then()`方法绑定的回调函数。

![20190903165427878.jpg][]

`Promise` 新建后就会立即执行。

let promise = new Promise(function(resolve, reject) { 
      console.log('Promise');
      resolve();
    });
    
    promise.then(function() { 
      console.log('resolved');
    });
    
    console.log('Hi!');
    
    // Promise
    // Hi!
    // resolved

`Promise` 新建后立即执行，所以首先输出的是`Promise`。然后，`then()`方法指定的回调函数，将在当前脚本**所有同步任务执行完**才会执行，所以`resolved`最后输出。

#### catach( ) 方法 ####

对于操作异常的程序，`Promise`专门提供了一个实例方法来处理：`catch()`方法。

`catch()` 只接受一个参数，用于处理操作异常后的业务。

getJSON('/posts.json').then(function(posts) { 
      // 处理成功
    }).catch(function(error) { 
      // 处理 getJSON 和 前一个回调函数运行时发生的错误
      console.log('发生错误！', error);
    });

`Promise`使用链式调用，是因为`then方法`和`catch方法`调用后，**都会返回promise对象**。

上面代码中，`getJSON()`方法返回一个 `Promise` 对象，如果该对象状态变为`resolved`，则会调用`then()`方法指定的回调函数；如果异步操作抛出错误，状态就会变为`rejected`，就会调用`catch()`方法指定的回调函数，处理这个错误。另外，`then()`方法指定的回调函数，如果运行中抛出错误，也会被`catch()`方法捕获。

const promise = new Promise(function(resolve, reject) { 
      throw new Error('test');
    });
    promise.catch(function(error) { 
      console.log(error);
    });
    // Error: test

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

![format_png 1][]

如果 `Promise` 状态已经变成`resolved`，再抛出错误是无效的。

上面代码中，`Promise` 在`resolve`语句后面，再抛出错误，不会被捕获，等于没有抛出。因为 `Promise` 的状态**一旦改变，就永久保持该状态，不会再变了**。

因为 `Promise.prototype.then` 和 `Promise.prototype.catch` 方法返回`promise` 对象， 所以它们可以被链式调用

![format_png 2][]

> `注意`： 如果一个`promise`对象处在`fulfilled`或`rejected`状态而不是`pending`状态，那么它也可以被称为 `settled` 状态。你可能也会听到一个术语`resolved` ，它表示`promise`对象处于`settled`状态。

举了这么多栗子，要是没看懂，让我们串一串吧，梳理一下上面提到的。（认真的看注释）

// 首先用 new 关键字创建一个 `Promise` 实例
    const promise = new Promise(function(resolve, reject){ 
        // 假设 state 的值为 true
        let state = true;
        if( state ){ 
            // 调用操作成功方法
            resolve('操作成功');
            //状态：从pending 到 fulfilled
        }else{ 
            // 调用操作异常方法
            reject('操作失败');
            //状态：从pending 到 rejected
        }
    });
    promise.then(function (res) { 
        //操作成功的处理程序
        console.log(res)
    }).catch(function (error) { 
        //操作失败的处理程序
        console.log(error)
    })
    // 控制台输出：操作成功

上面示例介绍了从 **创建实例，状态转换，then方法和catch方法的使用**。

如果多个操作之间层层依赖，我们用`Promise`又是怎么处理的呢？

如图所示：

![2019090317044822.gif][]

> 上面的代码，先是创建一个实例，还声明了4个函数，其中三个是分别代表着`请求A，请求B，请求C`；有了`then`方法，三个请求操作再也不用层层嵌套了。我们使用`then`方法，按照调用顺序，很直观地完成了三个操作的绑定，并且，如果`请求B`依赖于`请求A`的结果，那么，可以在`请求A`的程序用使用`return`语句把需要的数据作为参数，传递给下一个请求，示例中我们就是使用`return`实现传递参数给下一步操作的。

为了更直观的看到示例所展示的情况，在下做了一张图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70 3][]

**再举个Promise 中微任务顺序的栗子1：**

如上示例解释：

>  *  1.先执行`new Promise`第一层的代码，遇到`setTimeout`，将其推入**宏任务**队列中(此时未执行，排在当前script代码块的宏任务之后执行)，然后遇到了`resolve`，执行`Promise`后面的代码。
>  *  2.遇到`.then 1-1`，推入**微任务**队列里（只是推入，并未执行，所以`.then 1-2`的执行时机还没有到），这个时候发现没有其他的操作需要处理（比如推其他的微任务到队列里），那么就执行当前微任务队列里的函数，也就是执行`.then 1-1`的回调函数。
>  *  3.执行`.then 1-1`的回调函数的时候，发现了里面有一个完成态的`Promise`对象，不用管继续走，遇到了`.then 2-1`，推入**微任务**队列（只是推入，并未执行），此时`.then 1-1`回调执行完毕（没有return值，相当于return了一个undefined），然后`Promise`得以继续往下执行，遇到了`.then 1-2`，继续推入**微任务**队列（依然没执行），这时发现没有其他操作，开始顺位执行当前微任务队列里的函数（此时微任务队列里存放了`.then 2-1`和`.then 1-2`的回调函数），执行`.then 2-1`的回调函数时，又遇到了一个完成态的`Promise`，不用管继续走，遇到了`.then 3-1`，将其推入**微任务**队列（未执行），然后执行`.then1-2`的回调，打印 `3` ，此时已经没有了其他的操作，所以继续执行**微任务**队列里剩余的函数，即`.then 3-1`的回调函数，打印 `2` 。
>  *  4.至此，微任务队列已经执行完毕，开始执行宏任务队列中的下一个宏任务，打印 `1` 。

**再举个Promise 中微任务顺序的栗子2：**

如上示例解释：

>  *  1.如同栗子1。
>  *  2.如同栗子2。
>  *  3.执行`.then 1-1`的回调函数的时候，发现了里面有一个完成态的`Promise`对象，不用管继续走，遇到了`.then 2-1`，推入微任务队列（只是推入，并未执行），此时`.then 1-1`回调执行完毕（没有`return`值，相当于`return`了一个`undefined`），然后`Promise`得以继续往下执行，遇到了`.then 1-2`，继续推入微任务队列（依然没执行），这时发现没有其他操作，开始顺位执行当前微任务队列里的函数（此时微任务队列里存放了`.then 2-1`和`.then 1-2`的回调函数），执行`.then 2-1`的回调函数，打印 `2`，然后执行`.then1-2`的回调，打印 `3`。
>  *  4.至此，微任务队列已经执行完毕，开始执行宏任务队列中的下一个宏任务，打印 `1` 。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70 4][]

除了提供了实例方法以外，Promise还提供了一些类方法，也就是不用创建实例，也可以调用的方法,下面列举几个栗子：

#### Promise.all( ) 方法 ####

`Promise.all(iterable)` 方法返回一个 `Promise` 实例，此实例在 `iterable` 参数内所有的 `promise` 都“完成（`resolved`）”或参数中不包含 `promise` 时回调完成（`resolve`）；如果参数中 `promise` 有一个失败（`rejected`），此实例回调失败`（reject）`，失败原因的是第一个失败 `promise` 的结果。

var promise1 = Promise.resolve(3);
    var promise2 = 42;
    var promise3 = new Promise(function(resolve, reject) { 
      setTimeout(resolve, 3000, 'foo');
    });
    
    Promise.all([promise1, promise2, promise3]).then(values => { 
      console.log(values);
    });
    // expected output: Array [3, 42, "foo"]

解析：

> 因为实例`promise3`还没有进入成功`fulfilled`状态；等到了`3000`毫秒以后，实例`promise3`也进入了成功`fulfilled`状态，`Promise.all( )`才会进入`then`方法，然后在控制台输出：\[3, 42, “foo”\]

应用场景：我们执行某个操作，这个操作需要得到需要多个接口请求回来的数据来支持，但是这些接口**请求之前互不依赖，不需要层层嵌套**。这种情况下就适合使用`Promise.all( )`方法，因为它会得到所有接口都请求成功了，才会进行操作。

`注意：`如果传入的 `promise` 中有一个失败（`rejected`），`Promise.all`异步地将失败的那个结果给失败状态的回调函数，而不管其它 `promise` 是否完成。

#### Promise.finally( )方法 ####

`finally`方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 **ES2018** 引入标准的。这避免了同样的语句需要在`then()`和`catch()`中各写一次的情况。

promise
    .then(result => { ···})
    .catch(error => { ···})
    .finally(() => { ···});

上面代码中，不管`promise`最后的状态，在执行完`then`或`catch`指定的回调函数以后，都会执行`finally`方法指定的回调函数。

下面是一个例子，服务器使用 `Promise` 处理请求，然后使用`finally`方法关掉服务器。

server.listen(port)
      .then(function () { 
        // ...
      })
      .finally(server.stop);

如果你想在 `promise` 执行完毕后无论其结果怎样都做一些处理或清理时，`finally()` 方法可能是有用的。

#### Promise.race( ) 方法 ####

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

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

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

`Promise.race`方法的参数与`Promise.all`方法一样，如果不是 `Promise` 实例，就会先调用下面讲到的`Promise.resolve`方法，将参数转为 `Promise` 实例，再进一步处理。

const p = Promise.race([
      fetch('index.php'),
      new Promise(function (resolve, reject) { 
        setTimeout(() => reject(new Error('request timeout')), 5000)
      })
    ]);
    
    p
    .then(console.log)
    .catch(console.error);

上面代码中，如果 5 秒之内`fetch`方法无法返回结果，变量`p`的状态就会变为`rejected`，从而触发`catch`方法指定的回调函数。

由于`promise2`实例中`2000`毫秒之后就执行reject方法，早于实例`promise1`的`5000`毫秒，所以最后输出的是：promise2实例失败。

#### Promise.resolve( ) 方法 ####

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

const jsPromise = Promise.resolve($.ajax('/whatever.json'));

上面代码将 `jQuery` 生成的`deferred`对象，转为一个新的 `Promise` 对象。

`Promise.resolve`等价于下面的写法。

Promise.resolve('foo')
    // 等价于
    new Promise(resolve => resolve('foo'))

`Promise.resolve(value)`方法返回一个以给定值解析后的`Promise` 对象。如果该值为`promise`，返回这个`promise`；如果这个值是`thenable`（即带有["then" 方法][then_])），返回的promise会“跟随”这个thenable的对象，采用它的最终状态；否则返回的`promise`将以此值完成。此函数将类`promise`对象的多层嵌套展平。

**`警告`**：`不要在解析为自身的thenable 上调用Promise.resolve。这将导致无限递归，因为它试图展平无限嵌套的promise。一个例子是将它与Angular中的异步管道一起使用。`

**使用静态Promise.resolve方法**

Promise.resolve("Success").then(function(value) { 
      console.log(value); // "Success"
    }, function(value) { 
      // 不会被调用
    });

**resolve一个数组**

var p = Promise.resolve([1,2,3]);
    p.then(function(v) { 
      console.log(v[0]); // 1
    });

**Resolve另一个promise**

var original = Promise.resolve(33);
    var cast = Promise.resolve(original);
    cast.then(function(value) { 
      console.log('value: ' + value);
    });
    console.log('original === cast ? ' + (original === cast));
    
    /* * 打印顺序如下，这里有一个同步异步先后执行的区别 * original === cast ? true * value: 33 */

#### Promise.reject( ) 方法 ####

`Promise.reject(reason)`方法返回一个带有拒绝原因`reason`参数的`Promise`对象。

const p = Promise.reject('出错了');
    // 等同于
    const p = new Promise((resolve, reject) => reject('出错了'))
    
    p.then(null, function (s) { 
      console.log(s)
    });
    // 出错了

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

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

const thenable = { 
      then(resolve, reject) { 
        reject('出错了');
      }
    };
    
    Promise.reject(thenable)
    .catch(e => { 
      console.log(e === thenable)
    })
    // true

![20190903165427878.jpg][]

举一个**promise 应用**的栗子：

我们可以将图片的加载写成一个`Promise`，一旦加载完成，`Promise`的状态就发生变化。

const preloadImage = function (path) { 
      return new Promise(function (resolve, reject) { 
        const image = new Image();
        image.onload  = resolve;
        image.onerror = reject;
        image.src = path;
      });
    };

**Generator 函数与 Promise 的结合**

使用 [Generator函数][Generator] 管理流程，遇到异步操作的时候，通常返回一个Promise对象。

上面代码的 `Generator` 函数g之中，有一个异步操作`getFoo`，它返回的就是一个`Promise`对象。函数`run`用来处理这个`Promise`对象，并调用下一个`next`方法。

我目前所写的项目大多数都是[Generator函数][Generator] 与 Promise 的结合。

这个篇幅有点藏，如果你没有收藏可以收藏，以后慢慢的观看。

`以下是我的公众号，关注我，会让你有意想不到的收获~`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d0859c4724a649cd855c4ba862eeee39.jpg
[20190903164621572.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f251735c5b19458fb5acd8d02f61598a.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f7fee94cfb1d4527b2d5d373f2f8de81.jpg
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS85LzIvMTZjZjE0ZjMxMTVmOTI1Mw?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ae3c44cb9aa74196bc9790fa4eae82c8.jpg
[20190903165427878.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/51c9edad6c75467f82923b524e94bb83.jpg
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS85LzIvMTZjZjE2NDNhNzcwMjc2Nw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS85LzMvMTZjZjRlZjMyYWMwYjUwZA?x-oss-process=image/format,png
[2019090317044822.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a9d7bffcf2b7443180fdac79c525525f.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/404dcb490b70445099e4f6b281751d44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/fdbf9ee16ae443b3a08b445c91905fe8.jpg
[then_]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
[Generator]: http://es6.ruanyifeng.com/#docs/generator
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f8f0adece964423191d3e9db5a71bad0.png