ts-Promise

Promise

Promise的含义

异步编程的一种解决方案。Promise可以看做一个容器，里面保存着未来才会结束的事件(通常是异步操作)的结果。从语法上讲，Promise是对象，下图为Promise对象结构，PromiseState代表状态，PromiseResult代表结果。后面会详细说明。

Promise对象有以下两个特点

对象的状态不受外界影响。Promise代表一个异步操作，有三个状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果，可以决定当前是哪一种状态。其他任何操作都无法改变这个状态。
状态一旦改变，就会永久维持，任何时候都会得到这个结果。Promise状态的改变只有两种可能：从pending到fulfilled或从pending到rejected。如果是在状态已经发生改变之后再去添加回调函数，也会立即得到这个结果。这与事件的监听不同，不会因为状态改变时没有回调函数而错过。

在实际代码中，我们一般用resolve与reject分别对应fulfilled与rejected这两种状态。

Promise也有一些缺陷。

无法取消Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

基本用法

创建Promise实例

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

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

Promise构造函数接受一个函数为参数，该函数要求两个参数resolve、reject。它们是两个函数，由JS提供，不用自己设置。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。(这里提到的两个函数将结果信息传递出去，要我们自己定义回调函数来接收，这样才能获取到传递的信息，执行自己的业务逻辑)

在Promise中，我们要进行某个异步操作，如果执行成功了，就调用resolve，否则调用rejecrt，这里的条件是基于具体的异步操作的。比如我们常用的axios，其将请求这个异步操作封装成了Promise，在内部判断如果请求成功了，就会执行resolve，并将得到的数据作为参数传递出去。然后我们定义的对应回调函数可以接收到传递的消息。下面给出与这部分相关的Promise.then的介绍。

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

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

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受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最后输出。

这当然是具有合理性的，我们的业务逻辑实现会依赖异步操作的结果，因此设置了回调函数，在异步操作的结果确定之后执行，这是我们当然也希望所有的同步任务也已经执行完毕，所有的代码是在确定的环境下运行。所以这里的回调函数执行会在所有同步任务之后。

如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例，表示抛出的错误；resolve函数的参数除了正常的值以外，还可能是另一个 Promise 实例，比如像下面这样。

const p1 = new Promise(function (resolve, reject) {
  // ...
});

const p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})

上面代码中，p1和p2都是 Promise 的实例，但是p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作。

注意，这时p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态。如果p1的状态是pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是resolved或者rejected，那么p2的回调函数将会立刻执行。

Promise.prototype.then()

前面已经说过，then方法可以为Promise添加状态改变时的回调函数，除此之外，then方法的返回是一个Promise实例(不是原来的Promise)。因此可以采用链式写法。

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

这里的getJSON是一个返回Promise实例的函数。

then方法返回的Promise实例，会将回调函数中返回的结果作为实例中对应函数(resolve或reject)的参数。也就是这里第一个then方法返回的Promise实例相当于会执行这句resolve(json.post)。

采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function (comments) {
  console.log("resolved: ", comments);
}, function (err){
  console.log("rejected: ", err);
});

上面代码中，第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用第一个回调函数，如果状态变为rejected，就调用第二个回调函数。

Promise.prototype.catch()

只简单介绍一下catch的特性，这部分理解起来比较简单，可以直接看文档：https://es6.ruanyifeng.com/#docs/promise#Promise-prototype-catch

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

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

reject()方法的作用，等同于抛出错误。

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

Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

一般来说，不要在then()方法里面定义 Reject 状态的回调函数（即then的第二个参数），总是使用catch方法。理由是catch可以捕获前面then方法执行中的错误，也更接近同步的写法（try/catch）。