Promise对象

Promise的含义

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

Promise对象有以下两个特点：

1. 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（resolved）（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。

基本用法

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。
下面代码创建了一个Promise实例。

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

Promise构造函数接受一个回调函数作为参数，该函数接受两个参数分别是resolve和reject，它们是两个函数，由JS引擎提供，不用自己部署。

1. resolve函数作用：把Promise对象从pending变为resolved，在异步操作成功时调用，并把异步操作的结果，作为参数传递出去。
2. reject函数作用：把Promise对象从pending变为rejected，在异步操作失败时调用，并把异步操作报出的错误，作为参数传递出去。

Promise实例生成后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
then方法可以接受两个回调函数作为参数。分别在Promise对象的状态变为resolved和rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。
下面是一个异步加载图片的例子：

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const img = new Image();
    img.onload = function() {
      resolve(img);
    };
    img.onerror = function() {
      reject(new Error("Could not load the image at " + url));
    };
    img.src = url;
  });
}
loadImageAsync("img.jpg").then(function(value) {
  console.log("success");
}, function(error) {
  console.log(error);
});

如果图片加载成功，就调用resolve方法，否则就调用reject方法。
下面是一个用Promise对象实现的Ajax操作的例子：

function getJSON(url) {
  const promise = new Promise(function(resolve, reject) {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      //readyState值为4，表示已经接收到全部响应数据，而且可以在客户端使用了
      if(xhr.readyState !== 4) {
        return;
      }
      if(xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.open("get", url, true);
    xhr.setRequestHeader("Accept", "application/json");
    xhr.send(null);
  });
  return promise;
}
getJSON("new_file.json").then((json) => {
  console.log(json);
}, (error) => {
  console.log(error);
});

状态代码为200（响应已成功返回）就调用resolve方法，否则就调用reject方法。
上面的两个例子中，resolve和reject回调函数都带有参数。reject函数的参数一般是一个Error对象的实例，表示抛出的错误，resolve函数的参数除了正常的值外，还可能是一个Promise实例：

const p1 = new Promise(function(resolve, reject) {
  setTimeout(reject(new Error("fail")), 3000);
});
const p2 = new Promise(function(resolve, reject) {
  setTimeout(resolve(p1), 1000);
});
p2.then((value) => {
  console.log(value);
}, (error) => {
  console.log(error);
});

上面代码中p2的resolve函数的参数是p1，所以p2的状态由p1来决定。三秒后，p1的状态变为rejected，p2的状态也变为rejected，触发then方法的第二个回调函数。

Promise.prototype.then()

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

getJSON("new_file.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function(result) {
  console.log(result);
}, function(error) {
  console.log(error);
});

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

Promise.prototype.catch()

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, 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 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});

上面代码中，一共有三个 Promise 对象：一个由getJSON()产生，两个由then()产生。它们之中任何一个抛出的错误，都会被最后一个catch()捕获。
一般来说，不要在then()方法里面定义 Reject 状态的回调函数（即then的第二个参数），总是使用catch方法。
跟传统的try/catch代码块不同的是，如果没有使用catch()方法指定错误处理的回调函数，Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing().then(function() {
  console.log('everything is great');
});

setTimeout(() => { console.log(123) }, 2000);
// Uncaught (in promise) ReferenceError: x is not defined
// 123

上面代码中，someAsyncThing()函数产生的 Promise 对象，内部有语法错误。但Promise 内部的错误不会影响到 Promise 外部的代码，2 秒之后还是会输出123，通俗的说法就是“Promise 会吃掉错误”。

一般总是建议，Promise 对象后面要跟catch()方法，这样可以处理 Promise 内部发生的错误。catch()方法返回的还是一个 Promise 对象，因此后面还可以接着调用then()方法。

Promise.prototype.finally()

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

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

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

promise
.finally(() => {
  // 语句
});

// 等同于
promise
.then(
  result => {
    // 语句
    return result;
  },
  error => {
    // 语句
    throw error;
  }
);

上面代码中，如果不使用finally方法，同样的语句需要为成功和失败两种情况各写一次。有了finally方法，则只需要写一次。