JavaScript之Promises

Promises出世之前我们都是通过 events+回调函数来处理异步事件的

估计好多人都被一层一层嵌套的回调函数折磨的头疼。不信你看下面这个是什么鬼

asyncOne('one', () => {
  ...
  asyncTwo('two', () => {
    ...
    asyncThree('three', () => {
      ...
      asyncFour('four', () => {
      });
    });
  });
});

这样一层一层的嵌套起来，代码读起来，维护起来都很难。

明明监听了啊，怎么没调用？

var img1 = document.querySelector('.img-1');

img1.addEventListener('load', function() {
  // woo yey image loaded
});

img1.addEventListener('error', function() {
  // argh everything's broken
});

events的可能带来的问题就是，事件已经发生了你才开始监听，这时候你是永远等不到的。
events适用于监听会多次发生的事件，例如鼠标，键盘操作。对于这种事件我们不需要关注我们开始监听它之前究竟发生了什么。

终于等到你--Promise

在ES6 javaScript 推出了Promise
Promise正如它的名字所示，就是承诺异步函数会在某个时间点执行完成

img1.ready().then(function() { //img1.ready() 返回一个Promise
  // loaded
}, function() {
  // failed
});

// and…
Promise.all([img1.ready(), img2.ready()]).then(function() {
  // all loaded
}, function() {
  // one or more failed
});

promise和events的不同是，Promise只会发生一次，在发生之后你再调callback函数，仍然可以拿到之前执行的结果。
Promise的精髓就是，我们关注的是结果，而不关心具体事件发生的时间

Promise 有四个状态

• fulfilled -执行成功
• rejected -执行失败
• pending -正在执行
• settled -已经执行完成（成功或失败）

创建promise

var promise = new Promise(function(resolve, reject) {
  // 异步代码执行…

  if (/* 执行成功 */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});
The p

创建promise的时候需要一个回调函数作为参数，这个回调函数有两个参数resolve, reject也都是函数。当代码执行成功时调用resolve,失败时调用reject, 调用完resolve或者reject后执行结束，返回结果。
下面代码调用我们之前创建的promise

promise
.then(function(result) {
  console.log(result); // "Stuff worked!"
})
.catch(function(err) {
  console.log(err); // Error: "It broke"
});

promise执行成功后执行then方法，失败后执行catch方法

promise的方法

• Promise.resolve(promise) ; 返回promise
• Promise.resolve(thenable); 将thenable转成Promise
• Promise.resolve(obj); promise执行成功返回obj
• Promise.reject(obj); promise执行失败返回obj, obj instanceof Error
• Promise.all(array); 数组中得所有元素都执行成功返回fulfilled,否则 rejects
• Promise.race(array); 返回数组中执行最快的一个结果