ES6 |Promise对象

Promise 是异步编程的一种解决方案。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件的结果。Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

特点

1. 对象的状态不受外界影响。Promise有三个状态：Pending（进行中）、Resolved（已完成）和Rejected（已失败），只有异步操作的结果，可以决定当前是哪一种状态。
2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态只有两种改变：从Pending变为Resolved和从Pending变为Rejected。只要其中一个情况发生，状态就会一直保持这个结果。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果
3. 无法取消Promise，一旦新建它就会立即执行；如果不设置回调函数，Promise内部抛出的错误，不会反应到外部；当处于Pending状态时，无法得知目前进展到哪一个阶段

基本用法

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

//promise构建函数接受一个函数作为参数，
//函数内有两个参数：resolve和reject，它们是两个函数，由js引擎提供

var promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);	//状态从“未完成”到“成功”、异步操作成功时调用，并将结果作为参数抛出
  } else {
    reject(error);	//状态从“未完成”变为“失败”、异步操作失败时调用，并将错误作为参数抛出
  }
});

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

//接受两个回调函数作为参数：一个状态变为Resolved时调用，一个是状态变为Reject时调用。其中，第二个函数是可选的。这两个函数都接受Promise对象传出的值作为参数
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

一个例子

//一个返回Promise实例的方法
function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}
//调用方法，当promise的状态变成Resolved时，就会触发then绑定的回调函数
timeout(100).then((value) => {		//then后面状态变为Resolved时的回调，
  console.log(value);
});

异步加载图片的例子

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.onload = function() {
      resolve(image);
    };
    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };
    image.src = url;
  });
}

用Promise对象实现的Ajax操作的例子

//getJSON是对XMLHttpRequest对象的封装，用于发出一个针对JSON数据的HTTP请求
var getJSON = function(url) {
  var promise = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
  });

  return promise;
};

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

状态传递：p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态

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

//一个例子
var p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)	
   //2. 再2秒后，状态变成reject，传递给了p2，进而触发catch
})
var p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)	//1. 由于这里返回的是另一个Promise，所以自身的状态无效
})
p2
  .then(result => console.log(result))
  .catch(error => console.log(error))
// 3. Error: fail

方法

• Promise.prototype.then()

  (1) then的第一个参数是Resolved状态的回调函数，第二个参数（可选）是Rejected状态的回调函数

  (2) then方法返回的是一个新的Promise实例，因此可以采用链式写法。后面的回调会等待前一个的Promise状态发生变化后才调用

  //这里用then依次指定了两个回调函数。第一个回调函数完成后，会将返回结果作为参数，传入第二个回调函数
  getJSON("/posts.json").then(function(json) {
    return json.post;
  }).then(function(post) {
    // ...
  });
  

• Promise.prototype.catch()

  (1) 用于指定发生错误时的回调函数。

  getJSON('/posts.json').then(function(posts) {
    // ...
  }).catch(function(error) {
    //(1)如果异步操作抛出错误，状态就会变为Rejected，就会调用catch方法指定的回调函数，处理这个错误
    //(2)then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。
    console.log('发生错误！', error);	
  });
  

  (2) 相当于.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));
  

  (3) Promise 对象的错误会一直向后传递，直到被捕获为止。错误总是会被下一个catch语句捕获，如果catch内发生错误而后面没有catch来捕获，那么这个错误就无法被捕获到

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

  (4) 两种写法对比

  //写法1:不能捕获前面then方法执行中的错误
  promise
  .then(function(data) {
      // success
    }, function(err) {
      // error
    });
  
  //写法2:可以捕获前面then方法执行中的错误（推荐）
  promise
    .then(function(data) { //cb
      // success
    })
    .catch(function(err) {
      // error
    });
  

  (5) catch方法返回的还是一个 Promise 对象，因此后面还可以接着调用then方法。但当没有报错时，会跳过catch

• Promise.all()

  (1) 用于将多个Promise实例，包装成一个新的Promise实例

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

  (2) 最终p的状态由p1、p2、p3决定；只有p1、p2、p3状态都为Resolved，p的状态才会变成Resolved；如果p1、p2、p3有一个状态为rejected，p的状态就会变成rejected

• Promise.race()

  (1) 用于将多个Promise实例，包装成一个新的Promise实例

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

  (2) 只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变

• Promise.resolve()

  (1) 将现有对象转化为Promise对象

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

• Promise.reject()

  返回一个新的 Promise 实例，该实例的状态为rejected

  var p = Promise.reject('出错了');
  // 等同于
  var p = new Promise((resolve, reject) => reject('出错了'))
  
  p.then(null, function (s) {
    console.log(s)
  });
  // 出错了
  

• done()：总是处于回调链的尾端，保证抛出任何可能出现的错误

  asyncFunc()
    .then(f1)
    .catch(r1)
    .then(f2)
    .done();
  

• finally()：指定不管Promise对象最后状态如何，都会执行的操作，它接受一个普通的回调函数作为参数

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