Promise

含义

所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事情(通常是一个异步操作)的结果.从语法上来说,Promise是一个对象,从它可以获取异步操作的消息.
Promise有以下两个特点:

1. 对象的状态不受外界影响.Promise对象代表一个异步操作,有三种状态:pending(进行中),fulfilled(已成功)和rejectd(已失败).只有异步操作的结果,可以决定当前是哪一种状态
2. 一旦状态改变,就不会再变(resolved已定型),任何时候都可以得到这个结果.如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果

缺点:无法取消Promise,一旦新建就会立即执行;如果不设置回调函数,Promise内部抛出的错误,不会反映到外部;当处于pending状态时,无法得知进展到哪一个阶段

基本用法

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

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

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

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject.他们是两个函数,由JavaScript引擎提供,不用自己部署.
Promise实例生成之后,可以用then方法分别指定resolved状态和rejected状态的回调函数

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

这两个函数都接受Promise对象传出的值作为参数.

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1

立即resolved的Promise是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务
一般来说,调用resolve或reject以后,Promise的使命就完成了,后面操作应该放到then方法里面.所以在它们前面加上return语句,这样就不会发生意外.

new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})

Promise.prototype.then

作用是为Promise实例添加状态改变时的回调函数.返回的是一个新的Promise实例.因此可以采用链式写法,即then方法后面再调用另一个then方法
采用链式的then,可以指定一组按照次序调用的回调函数.这时,前一个回调函数有可能返回的还是一个Promise对象(有异步操作),这时后一个回调函数就会等待该Promise对象的状态发生变化,才会被调用

getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("resolved: ", comments),
  err => console.log("rejected: ", err)
);

Promise.prototype.catch

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

p.then((val) => console.log('fulfilled:', val))
  .catch((err) => console.log('rejected', err));

// 等同于
p.then((val) => console.log('fulfilled:', val))
  .then(null, (err) => console.log("rejected:", err));

如果Promise状态已经变成resolved,再抛出错误是无效的
Promise对象的错误具有"冒泡"性质,会一直向后传递.
一般来说,不要在then方法里面定义Reject状态的回调函数(即then的第二个参数),总是使用catch方法.理由是第二种写法可以捕获前面then方法执行中的错误,也更接近同步的写法(try/catch).
Promise的错误不会影响到Promise外部的代码,天通俗的说法是"Promise会吃掉错误"
一般总是建议Promise对象后面要跟catch方法,这样可以处理Promise内部发生的错误.catch方法返回的还是一个Promise对象,因此后面还可以接着调用then方法
catch方法之中还可以抛出错误,而且可以继续使用catch方法捕获

Promise.prototype.finally

finally方法用于指定不管Promise对象状态如果,都会执行的操作.该方法是ES7引入标准的
finally方法的回调函数不接受任何参数,finally方法里面的操作,应该是与状态无关的,不依赖与Promise的执行结果
实现finally代码:

Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

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. 如果三者状态都变成fulfilled,p的状态才会变成fulfilled,此时三者的返回值组成一个数组,传递给p的回调函数
2. 只有三者中有一个被reject,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数

注意,如果作为参数的Promise实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all的catch方法

Promise.race

该方法同样是将多个Promise实例包装成一个新的Promise实例.

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

只要参数中三个Promise实例率先改变状态,p的状态就跟着改变.那个率先改变的Promise实例的返回值,就传递给p的回调函数

Promise.resolve

该方法可以将现有对象转为Promise对象

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

Promise.resolve方法的参数分成四种情况:

1. 参数是一个Promise实例
2. 参数是一个thenable对象
   thenable对象指得是具有then方法的对象.会将这个对象转为Promise对象,然后就立即执行thenable对象的then方法
3. 参数不是具有then方法的对象,或根本不是对象
   返回一个新的Promise对象,状态为resolved.所以回调函数会立即执行
4. 不带有任何参数
   Promise.resolve方法允许调用时不带任何参数,直接返回一个resolved状态的Promise对象

需要注意的是,立即resolve的Promise对象,是在本轮"事件循环"的结束时,而不是在下一轮的开始时

Promise.reject

该方法也会返回一个新的Promise实例,该实例的状态为rejected
注意:Promise.reject方法的参数,会原封不动的座位reject的理由,变成后续方法的参数

应用

• 加载图片

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函数管理流程,遇到异步操作的时候,通常返回一个Promise对象

function getFoo () {
  return new Promise(function (resolve, reject){
    resolve('foo');
  });
}

const g = function* () {
  try {
    const foo = yield getFoo();
    console.log(foo);
  } catch (e) {
    console.log(e);
  }
};

function run (generator) {
  const it = generator();

  function go(result) {
    if (result.done) return result.value;

    return result.value.then(function (value) {
      return go(it.next(value));
    }, function (error) {
      return go(it.throw(error));
    });
  }

  go(it.next());
}

run(g);

Promise.try

实际开发中,经常会遇到一种情况:不知道或者不想区分,一个函数是同步函数还是异步操作,但是享用Promise来处理

1. 使用async函数

const f = () => console.log('now');
(async () => f())();
console.log('next');
// now
// next

2. 使用new Promise

const f = () => console.log('now');
(
  () => new Promise(
    resolve => resolve(f())
  )
)();
console.log('next');
// now
// next

鉴于该需求很常见,所以现在提案,提供Promise.try方法替代上面的写法

const f = () => console.log('now');
Promise.try(f);
console.log('next');
// now
// next

由于Promise.try为所有操作提供了统一的处理机制,所以如果想用then方法管理流程,最好都用Promise.try包装一下.这样很多好处,其中一点就是处理异常

Promise.try(database.users.get({id: userId}))
  .then(...)
  .catch(...)

事实上,Promise.try就是模拟try代码块,就像Promise.catchmoni的是catch代码块