Promise对象及相关实例方法介绍

Promise 对象

1.0 Promise 的含义

Promise 是一步编程的一种解决方案, 比传统的解决方案 — 回调函数和事件 — 更合理和更加强大.

所谓 Promise, 简单来说就是一个容器, 里面保存着某个未来才会结束的事件(通常是一个一步操作)的结果.

Promise 对象有以下两个特点.

1. 对象的状态不受外界影响. Promise 对象代表一个一步操作, 有三种状态: pending , fulfilled 和 rejected . 只有异步操作的结果, 可以决定当前是哪一种状态, 其他任何操作都无法改变这个状态.
2. 一旦状态改变, 就不会再变, 任何时候都可以得到这个结果. Promise 对象的状态改变, 只有两种可能: 从 pending 变为 fulfilled 和从 pending变为rejected. 这要这两种情况发生, 状态就凝固了, 不会再改变了, 会一直保持这个结果, 这时就称为 resolved(已定性). 如果改变已经发生了, 你再对 promise 对象添加回调函数, 也会立即得到这个结果. 这与事件完全不同, 事件的特点就是, 如果你错过了它, 你再去监听,是得不到结果的.

有了 Promise 对象, 就可以将异步的操作 以 同步的流程表达出来., 避免了层层嵌套函数. 此外, Promise 对象提供统一的接口,使得控制异步操作更加容易.

Promise 也有一些缺点,:

• 首先, 无法取消 Promise, 一旦新建它就会立即执行, 无法取消.
• 其次, 如果不设置回调函数, Promise 内部抛出的错误, 不会反映到外部.
• 第三, 当处于 pending 状态时, 无法得知目前进展到哪一个阶段(即: 无法得知是刚刚开始还是即将完成).

2.0 基本用法

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

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

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise 构造函数接收一个函数作为参数, 该函数的两个参数分别是 resolve 和 reject. 它们是两个函数, 有JavaScript 引擎提供, 不用自己部署.

resolve 函数的作用是, 将 Promise 对象的状态从"未完成" 变为 “成功”(即从 pending 变为 resolved), 在异步操作成功时调用, 并将异步操作的结果, 作为参数传递出去.

reject 函数的作用是, 将 Promise 对象的状态从 “未完成” 变为 “失败” (即从 pending 变为 rejected), 在异步操作失败时调用, 并将异步操作爆出的错误, 作为参数传递出去.

Promise 实例生成以后, 可以用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数.

promise.then((value)=>{
    // success
},(error)=>{
    // failure
})

then 方法可以接收两个回调函数作为参数,:

• 第一个回调函数是 Promise 对象的状态变为 resolved 时调用
• 第二个回调函数是 Promise 对象的状态变为 rejected 时调用.

其中, 第二个函数是可选的, 不一定要提供. 这两个函数都接受 Promise 对象传出的值作为参数.

下面是一个 Promise 对象的简单例子.

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done'); // 把 'done' 结果传给 resolve 函数.
  });
}

timeout(100).then((value) => {
  console.log(value); // done
});

🏴 注意: setTimeout函数理解

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]); 
var timeoutID = scope.setTimeout(code[, delay]);

// 参数理解
  function: 是你想要在到期时间之后执行的函数
  delay:  可选, 延迟的时间
  arg1, ... , argN: 可选, 附件参数, 一旦定时器到期, 它们会作为参数传递给 `function` 
  
#  代码演示如下 ----------------------

setTimeout(function (value1, value2, value3) {
    console.log(value1,value2, value3); // 参数一 参数2 参数三
}, 1000, '参数一', '参数2','参数三')

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

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最后输出

3.0 Promise.prototype.then()

Promise 实例具有 then 方法, 也就是说, then方法是定义在原型对象Promise.prototype 上的. 它 的作用是为 Promise实例添加状态改变时的回调函数. 前面说过, then 方法 的 第一个参数是 resolved 状态对应的回调函数, 第二个参数(可选) 是 rejected 状态对应的回调函数.

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

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

上面的代码使用then方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

4.0 Promise.prototype.catch()

Promise.prototype.catch() 方法是 `.then(null,rejection) 或.then(undefined,rejection)的别名, 用于指定发生错误时的回调函数.

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

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

5.0 Promise.prototype.finally()

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

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

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

finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

6.0 Promise.all()

Promise.all() 方法用于将多个 Promise 实例, 包装成一个新的 Promise实例.

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

上面代码中，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 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的回调函数。

7.0 Promise.race()

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

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

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

8.0 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'))

1. 参数是一个 Promise实例

   如果参数是一个Promise实例, 那么Promise.resolve 将不做任何修改, 原封不懂返回这个实例.

2. 参数是一个 thenable对象

   thenable 对象指的是具有 then 方法的对象, 比如下面这个对象

   let thenable = {
     then: function(resolve, reject) {
       resolve(42);
     }
   };
   

   Promise.resolve 方法会将这个对象转为 Promise 对象, 然后就立即执行 thenable 对象的 then 方法

   let thenable = {
     then: function(resolve, reject) {
       resolve(42);
     }
   };
   
   let p1 = Promise.resolve(thenable);
   p1.then(function(value) {
     console.log(value);  // 42
   });
   

   上面代码中，thenable对象的then方法执行后，对象p1的状态就变为resolved，从而立即执行最后那个then方法指定的回调函数，输出 42。

3. 参数不是具有then方法的对象, 或根本就不是对象

如果参数是一个原始值, 或者是一个不具有 then 方法的对象, 则 Promise.resolve 方法返回一个新的Promise 对象, 状态为 resolved .

const p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)
});
// Hello

上面代码生成一个新的 Promise 对象的实例p。由于字符串Hello不属于异步操作（判断方法是字符串对象不具有 then 方法），返回 Promise 实例的状态从一生成就是resolved，所以回调函数会立即执行。Promise.resolve方法的参数，会同时传给回调函数。

4. 不带有任何参数

Promise.resolve() 方法允许调用时不带参数, 直接返回一个 resolved 状态的 Promise 对象.

所以, 如果希望得到一个 Promise 对象, 比较方便的方法就是直接调用 Promise.resolve()方法.

const p = Promise.resolve();

p.then(function () {
  // ...
});

上面代码的变量p就是一个 Promise 对象。

需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。

setTimeout(function () {
  console.log('three');
}, 0);

Promise.resolve().then(function () {
  console.log('two');
});

console.log('one');

// one
// two
// three

上面代码中，setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.resolve()在本轮“事件循环”结束时执行，console.log('one')则是立即执行，因此最先输出。

9.0 Promise.rejected()

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的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

const thenable = {
  then(resolve, reject) {
    reject('出错了');
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})
// true

上面代码中，Promise.reject方法的参数是一个thenable对象，执行以后，后面catch方法的参数不是reject抛出的“出错了”这个字符串，而是thenable对象。

总结:

上一章: ES6 Reflect 介绍, Reflect 相关方法介绍

下一章: Generator 函数语法, yield 表达式, next()方法理解

交流学习添加微信(备注技术交流学习): Gene199302

该博客为学习阮一峰 ES6入门课所做的笔记记录, 仅用来留作笔记记录和学习理解