简单学习 Promise 对象

摘要：方法是的别名，用于指定发生错误时的回调函数。由于字符串不属于异步操作判断方法是字符串对象不具有方法，返回实例的状态从一生成就是，所以回调函数会立即执行。出错了等同于出错了出错了上面的代码生成一个对象的实例，状态为，回调函数会立即执行。

引言 Promise 是异步编程的一种解决方案，比传统的解决方案——回调和事件——更合理且强大。最近的项目要用到这个，就参照阮一峰老师的《ES6标准入门》这本书简单学一下了。

所谓 Promise ，简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上来看，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise 对象有以下两个特点。

对象的状态不受外界影响。

一旦状态改变就不会再变。

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

var 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(function (value) {
  // success
  console.log(value);
}, function (error) {
  // failed
  console.log(error);
});

then 方法可以接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 Resolved 时调用，第二个回调函数是 Promise 对象的状态变为 Rejected 时调用。其中第二个参数是可选的，不一定要提供。这两个函数都接收 Promise 对象传出的值作为参数。

我们来个小例子

let promise = new Promise(function(resolve,reject){
  console.log("Promise");
  let value = "value";
  resolve(value);
});

promise.then(function(value){
  console.log(value);
});
console.log("Hi");

// Promise
// Hi
// value

上面的代码中，Promise 新建后会立即执行，所以首先输出的是 Promise。然后，then 方法指定的回调函数将当前脚本所有同步任务执行完成后才会执行，所以 Resolved 最后输出。

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 方法依次指定了两个回调函数。第一个回调函数完成以后，将会返回结果作为参数，传入第二个回调函数。

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

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

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

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

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));

下面是一个例子。

const promise = new Promise(function(resolve, reject) {
  throw new Error("test");
});
promise.catch(function(error) {
  console.log(error);
});
// Error: test

上面的代码中，Promise 抛出一个错误就被 catch 方法指定的回调函数所捕获。注意，上面的写法和下面两种写法是等价的。

// 写法一
const promise = new Promise(function(resolve, reject) {
  try {
    throw new Error("test");
  } catch(e) {
    reject(e);
  }
});
promise.catch(function(error) {
  console.log(error);
});

// 写法二
const promise = new Promise(function(resolve, reject) {
  reject(new Error("test"));
});
promise.catch(function(error) {
  console.log(error);
});

由上面可以看出， reject 方法的作用等同于抛出错误。
如果 Promise 状态已经变成 Resolved，在抛出错误是无效的。

const promise = new Promise(function(resolve, reject) {
  resolve("ok");
  // Promise 状态已变成 已完成
  throw new Error("test");
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });
// ok

注意 一般来说，不要在 then 方法中定义 Reject 状态的回调函数（即 then 的第二个参数），而是使用 catch 方法。

// 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 方法的第二个参数。

Promise.all 方法是将多个 Promise 对象实例包装成一个新的实例。

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

上面的代码中，Promise.all() 方法接受一个数组作为参数，p1, p2, p3 都是 Promise 对象的实例。如果不是，就会先调用下面讲到的 Promise.resolve 方法，将参数转换为 Promise 实例，再进一步处理（Promise.all 方法的参数不一定是数组，但是必须具有 Iterator 接口，且每个返回成员都是 Promise 实例）。

p 的状态由 p1, p2, p3 决定，分成两种情况

只有 p1, p2, p3 的状态都变成 FulFilled，p 的状态才会变成 FulFilled，此时 p1, p2, p3 的返回值组成一个数组，传递给 p 的回调函数。

只要 p1，p2，p3 中有一个被 Rejected ，p 的状态就直接变成 Rejected，此时第一个被 Rejected 的实例的返回值会传递给 p 的回调函数。

下面是一个具体例子。

var promises = [2,3,4,5].map(function(id){
      console.log(id)
    });
    
    Promise.all(promises).then(function(res){
      console.log(res);
      resolve
    }).catch(function(error){
      console.log(error);
    });

// 先执行所有 promise 实例的异步操作，然后吧操作的结果打包数组返回
// 2 3 4 5 [undefined,undefined,undefined,undefined]

上面的代码中，Promise 是包含 6 个 Promise 实例的数组，只有这 6 个实例的状态都变成 fulfilled，或者其中有 1 个变成 rejected，才会调用 Promise.all 方法后面的回调函数。

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

var p = Promise.race([p1, p2, p])

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

下面是一个例子,如果指定时间内没有获得结果，就将 Promise 的状态变成 Rejected，否则就变为 Resolved。

const p = Promise.race([
  fetch("/resource-that-may-take-a-while"),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error("request timeout")), 5000)
  })
]);

p
.then(console.log)
.catch(console.error);

上面代码中，如果 5 秒之内 fetch 方法无法返回结果，变量 p 的状态就会变为 rejected，从而触发 catch 方法指定的回调函数。

有时需要将现有对象转为 Promise 对象，Promise.resolve 方法就起到这个作用。

const jsPromise = Promise.resolve($.ajax("/whatever.json"));

上面代码将 jQuery 生成的 deferred 对象，转为一个新的 Promise 对象。

Promise.resolve 等价于下面的写法。

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

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

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

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。

如果参数是一个原始值，或者是一个不具有 then 方法的对象，那么 Promise.resolved 方法返回一个新的 Promise 对象，状态为 Resolved。

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

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

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

Promise.resolved 方法允许在调用时不带有参数，而直接返回一个 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") 则是立即执行，因此最先输出。

Promise.reject(resson) 方法也会返回一个新的 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 学习的内容，如有错误的地方就请在下面评论处，发表一下看法，当然也可以放一下关于进阶学习 Promise 的文章，大家一起学习。