从浅入深的Promise(上)

342 阅读7分钟
  1. 前言
  2. 什么是promise
  3. 为了解决什么问题
  4. Promise对象的特点
  5. Promise缺点
  6. 基本语法

1、前言

记了忘,忘了记的Promise。梳理一个脉络便于记住Promise,更详细的举例请参考阮一峰的教程

2、什么是promise

语法上来说,Promise是一个构造函数,在js中函数就是对象,Promise对象可以获取异步操作的消息。
Promise简单理解是一个容器,里面保存这未来才会结束的事件(通常是一个异步操作)的结果

3、为了解决什么问题

promise是解决异步的一种方案,在ES6中提出的。传统的解决方案是回调函数和事件
相比于回调地狱,promise增加了代码的可读性

4、Promise对象的特点

Promise对象有两个特点:
1)对象的状态不受外界影响。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。
2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。
Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。 只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。

5、Promise缺点

  1. 无法取消Promise,一旦新建它就会立即执行,无法中途取消。
  2. 如果不设置回调函数,Promise内部抛出的错误,不会反应到外部
  3. 当处于pending状态时,无法得知目前进展到哪一个阶段

6、基本语法

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

1. Promise 构造函数的参数

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

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。它们是两个函数,由 JavaScript 引擎提供。
resolve()作用:
Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去
reject()作用:
将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

2. Promise实例的then方法

1、什么是then方法?作用?
Promise 实例具有then方法,then方法是定义在原型对象Promise.prototype上的。
作用:是为 Promise 实例添加状态改变时的回调函数。 promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
2、then方法参数
then方法的参数:接受两个回调函数作为参数,它们都是可选的。

    const promise = new Promise((resolve, reject)=>{
       console.log('promise自定义的同步函数')
    })
    promise.then(function(value)(),function(error){})

第一个参数:resolved状态的回调函数
第二个参数:rejected状态的回调函数
Promise构造函数内的内容同步执行,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出。(promise同步执行,then异步更新)

3、then方法的链式调用
then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

3、Promise实例的catch方法

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名,用于指定发生错误时的回调函数。
开发中一般用catch捕获异常,而不用then(null,reject)第二个参数来捕获。因为catch可以捕获then方法执行中的错误
一般总是建议,Promise 对象后面要跟catch()方法,这样可以处理 Promise 内部发生的错误。 catch()方法返回的还是一个 Promise 对象,因此后面还可以接着调用then()方法。
举个例子详细说明:

// bad
    promise
      .then(function(data) {
        // success
      }, function(err) {
        // error
      });

    // good
    promise
      .then(function(data) { //cb
        // success
      })
      .catch(function(err) {
        // error
      });

上面代码中,第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then方法执行中的错误,也更接近同步的写法(try/catch)。
因此,建议总是使用catch()方法,而不使用then()方法的第二个参数。
注意:
跟传统的try/catch代码块不同的是,如果没有使用catch()方法指定错误处理的回调函数,Promise 对象抛出的错误不会传递到外层代码,即不会有任何反应。这就是说,Promise 内部的错误不会影响到 Promise 外部的代码,通俗的说法就是“Promise 会吃掉错误”。

4、Promise实例的finally方法

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

finally()方法: 用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。
finally()方法不接受任何参数。因此finally方法里面的操作,应该是与状态无关的,不依赖Promise的执行结果

5、Promise.all()

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

Promise.all()可以确定所有请求都成功了,但是只要有一个请求失败,它就会报错,而不管另外的请求是否结束。
作用:
Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例
参数:
Promise.all()方法接受一个数组作为参数,p1p2p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。
另外,Promise.all()方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。
p的状态由p1、p2、p3决定,分成两种情况。
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数

6、Promise.race()

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

只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。
Promise.race()方法的参数与Promise.all()方法一样,如果不是 Promise 实例,就会先调用下面讲到的Promise.resolve()方法,将参数转为 Promise 实例,再进一步处理。

7、Promise.allSettled()

Promise.allSettled()方法,用来确定一组异步操作是否都结束了(不管成功或失败)。(所有的状态都发生改变,Promise才改变)
参数:接受一个数组作为参数,数组的每个成员都是一个 Promise 对象,并返回一个新的 Promise 对象
只有等到参数数组的所有 Promise 对象都发生状态变更(不管是fulfilled还是rejected),返回的 Promise 对象才会发生状态变更。

8、Promise.any()

该方法接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例返回。
只要参数实例有一个变成fulfilled状态,包装实例就会变成fulfilled状态;如果所有参数实例都变成rejected状态,包装实例就会变成rejected状态。(只有全假才假,一真就真)

Promise.any()Promise.race()方法很像,只有一点不同,就是Promise.any()不会因为某个 Promise 变成rejected状态而结束,必须等到所有参数 Promise 变成rejected状态才会结束。

9、Promise.resolve()

将对象转为 Promise 对象,Promise.resolve()方法就起到这个作用。 Promise.resolve()等价于下面的写法。

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

10、Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected

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的理由,变成后续方法的参数。