ES6 的Promise

1.Promise的解释

A promise represents the eventual result of an asynchronous operation. --Promises/A+

A Promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly asynchronous) computation. --ECMAscript

Promises/A+ 规范中表示为一个异步操作的最终结果，ECMAscript 规范定义为延时或异步计算最终结果的占位符。言简意赅，但稍微有点晦涩，如何表述更浅显易懂呢？

讲起promise，记得以前刚学js的时候，纠结了半天为什么会存在promise这个东西，在之前的iOS开发中也很少涉及。在Objective－C中，进行网络请求后，直接通过block回调进行一大堆异步的处理。可能也是因为数据量不大，App的开发重心主要在界面视图上去了，所以在数据请求这一块下的功夫不多。
闲话好像说得有点多了，那么JavaScript中的promise对象是来干什么的呢？
首先，它是一个对象，也就是说与其他JavaScript对象的用法，没有什么两样；其次，它起到代理作用（proxy），充当异步操作与回调函数之间的中介。使得异步操作具备同步操作的接口，使得程序具备正常的同步运行的流程，回调函数不必再一层层嵌套。

2.Promise的示例

话不多说，上代码

//以前在网络请求后的写法
callSuccess : (res) =>() {
 //需要嵌套执行 step1 -> step2 -> step3 －>step4
  step1(function (value1) {
    step2(value1, function(value2) {
      step3(value2, function(value3) {
        step4(value3, function(value4) {
          // ...
        });
      });
    });
  });
}
//promise 写法(便于理解的简化写法)
callSuccess : (res) =>() {
  // Promises的写法
  (new Promise(step1))
    .then(step2)
    .then(step3)
    .then(step4);
}

从上面代码可以看到，采用Promise接口以后，程序流程变得非常清楚，十分易读。
总的来说，传统的回调函数写法使得代码混成一团，如果回调特别多的时候，则代码会横向发展而不是向下发展。Promise就是为了解决这个问题而提出的，目标是使用正常的程序流程（同步），来处理异步操作。它先返回一个Promise对象，后面的操作以同步的方式，寄存在这个对象上面。等到异步操作有了结果，再执行前期寄放在它上面的其他操作。

3.Promise的状态接口

promise 英文解释即为承诺。想起了傻白甜的爱情剧中，男主角最后总会实现自己的承诺，兑现诺言，娶得妹子归。而女主角在遇到男主角之前总会遇见一个渣男，始乱终弃。所以promise中出现了三种状态

• 异步操作“未完成”（pending）－－静静等待爱情的到来
• 异步操作“已完成”（resolved，又称fulfilled）－－完美结局
• 异步操作“失败”（rejected）－－渣男结局

这三种的状态的变化途径只有两种。

• 异步操作从“未完成”到“已完成”(resolved)。
• 异步操作从“未完成”到“失败”(rejected)。

4.Promise对象的简单生成

ES6提供了原生的Promise构造函数，用来生成Promise实例。
下面代码创造了一个Promise实例。

var promise = new Promise(function(resolve, reject) {
  // 异步操作的代码

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

//简单的图片加载例子 使用promise
function imgLoad(url) {
  return new Promise(function(resolve, reject) {
    var request = new XMLHttpRequest();
    request.open('GET', url);
    request.responseType = 'blob';
    request.onload = function() {
      if (request.status === 200) {
        //成功完成承诺
        resolve(request.response);
      } else {
        //失败抛出异常
        reject(new Error('图片加载失败：' + request.statusText));
      }
    };
    request.onerror = function() {
      //失败抛出异常
      reject(new Error('发生网络错误'));
    };
    request.send();
  });
}

/* 外部调用 */
// async 函数返回一个 Promise 对象，使用async 关键字后的函数，可使用await语法
initImageView = async function (url) {
 //使用try catch 捕获异常
  try {
    //ES6语法 await即等待promise返回结果后再继续进行执行下一段代码
     await imgLoad(url);
  }  catch(error) {
     console.log(error);
  }
}