ES6 爬坑记（一） Promise

Promise!!!!!

---

参考文章：
阮一峰的ES6入门——Promise章节
谷歌开发——Promise节选

---

1. 基本概念

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

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

• 对象状态不受外界影响，只与其代表的异步操作有关，只有异步操作的结果可以改变其状态，正如Promise所表达，保证不受其他影响
• 仅有三种状态分别为 pending(进行中)、fulfilled(成功)、rejected(失败)
• 状态变化只有两种 pending=>fulfilled 和pending=>rejected且一旦发生，状态则凝固，成为resolved，无论如何对Promise对象添加回调函数，都无法改变，且立即得到结果
• 与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的
• 因此产生了缺点--即结果无法取消，resloved的对象一旦设置新回调就会立即按照状态去执行。
• Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

如果某些事件不断地反复发生，一般来说，使用 Stream 模式（见Nodejs文档）是比部署Promise更好的选择。

2.用法

• Promise对象构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject,分别是两个函数，对应fulfilled``rejected时的调用

function loadAsync(url){
    return new Promise(function(resovle,reject){
        const image = new Image();
        image.onload = function (){
            resolve(image);  //根据实际情况设置 resolve函数的调用时机，且这一步的调用确定本对象的状态
        };
        image.onerror = function(){ 
            reject(new Error());
        }
        image.src = url;
    })
}

• 通过Promise.ptototype.then(reslovedFunction,rejectedFunction) 传入回调的函数
• 传入的回调函数会在同步操作完成后才执行

Ajax原生调用的例子

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

• 若Promise 构造中，若对resolve或，reject的调用中传入另一个Promise对象，则本对象的状态将无效，而取决于传入的Promise对象状态来执行resolve和reject,请尽力理解下方代码

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(result => console.log(result))
  .catch(error => console.log(error))
// Error: fail

上面代码中，p1是一个 Promise，3 秒之后变为rejected。p2的状态在 1 秒之后改变，resolve方法返回(或者说是调用)的是p1。由于p2返回(调用)的是另一个 Promise，导致p2自己的状态无效了，由p1的状态决定p2的状态。所以，后面的then语句都变成针对p1。此时p1还处于pending，又过了 2 秒，p1变为rejected，导致触发catch方法指定的回调函数。

• 注意，调用resolve或reject并不会终结 Promise 的构造函数的参数函数的执行。generally，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句，这样就不会有意外。

3. 常用方法

1.Promise.prototype.then(resolveFuntcion,[rejectfunction])
返回一个Promise对象 故可以链式调用 ， 将前一个then中的返回结果作为下一个then的参数 ，其中返回结果可为一个Promise对象，后一个回调需等待该对象状态而被调用，且其调用的参数是前一个返回Promise对象中resolve传入的参数

2.Promise.prototype.catch(rejectfunction)
catch 所有前方回调的reject，和抛出的错误，用于捕获错误，

Promise 内部的错误不会影响到 Promise 外部的代码，通俗的说法就是“Promise 会吃掉错误”。出现错误不会退出进程
Promise 对象后面要跟catch方法，这样可以处理 Promise 内部发生的错误。catch方法返回的还是一个 Promise 对象，因此后面还可以接着调用then方法。

3.Promise.prototype.finally(function)
无论结果如何都要执行，不管状态

4.Promise.all([p1,p2,..])

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

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

5.Promise.race([p1,p2,..])
Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

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

6.Promise.resolve(obj)
将现有对象转为 Promise 对象
- 参数为Promise实例，无事发生
- 参数对象具有then方法，将对象转为promise并立即执行then
- 没有then 和不是对象 返回一个resloved状态的promise对象，且参数为下一个then回调方法的参数
- 没有参数,返回一个resloved状态的promise对象，立即resolve的 Promise 对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。

7.Promise.reject(obj) 参照reslove 但状态不同

8.Promise.try()

Promise.try(database.users.get({id: userId}))//同时存在异步同步错误
  .then(...)
  .catch(...)

事实上，Promise.try就是模拟try代码块，就像promise.catch模拟的是catch代码块。

4.错误处理

catch() 和then()的第二参数，两者之间的差异虽然很微小，但非常有用。Promise 拒绝后，将跳至带有拒绝回调的下一个 then()（或具有相同功能的 catch()）。如果是 then(func1, func2)，则 func1 或 func2 中的一个将被调用，而不会二者均被调用。但如果是 then(func1).catch(func2)，则在 func1 拒绝时两者均被调用，因为它们在该链中是单独的步骤。看看下面的代码：

asyncThing1().then(function() {
  return asyncThing2();
}).then(function() {
  return asyncThing3();
}).catch(function(err) {
  return asyncRecovery1();
}).then(function() {
  return asyncThing4();
}, function(err) {
  return asyncRecovery2();
}).catch(function(err) {
  console.log("Don't worry about it");
}).then(function() {
  console.log("All done!");
})

image.png