深入理解JS异步编程三(promise)

jQuery

原本写一个小动画我们可能是这样的

$('.animateEle').animate({  opacity:'.5'}, 4000,function(){  $('.animateEle2').animate({    width:'100px'  },2000,function(){    $('.animateEle3').animate({      height:'0'    },2000);  });});

但是如果我们使用promis对象的话，就可以使得代码更加简单易懂

var animate1 = function() {  return $('.animateEle1').animate({opacity:'.5'},4000).promise();};var animate2 = function() {  return $('.animateEle2').animate({width:'100px'},2000).promise();};var animate3 = function(){  return $('.animateEle3').animate({height:'0'},2000).promise();};$.when(animate1()).then(animate2).then(animate3);

对比上面两段代码，回调的形式相比promise，后期较难维护，层层嵌套，出错不好定位，反直觉。

Promise对象方法

对于DOM，动画，ajax相关方法，都可以使用 promise 方法。调用 promise 方法，返回的是 promise 对象。可以链式调用 promise 方法。

比如jquery中的ajax的 $.post $.get $.ajax 等方法，实际上都是默认调用了promise方法，然后返回了一个promise对象

promise对象常见的方法有三个 ： done ， fail ， then 。

$.get('/',{}).done(function(data){    console.log('success');}).fail(function(){    console.log('fail');});

query 这里的接口方法太多了，就跟早期的事件方法绑定一样， live ， delegate ， bind ，最终还是归为 on。

deferred对象方法

var  promisepbj = new $.Deferred();promisepbj.done(function() {console.log('haha,done');}).fail(function() {console.log('失败了');}).always(function(res) {console.log('我总是被执行啦');});//使用resolve或者reject就可以调用defferred对象了promisepobj.resolve();//promisepobj.reject();

resolve 方法会触发 done 的回调执行， reject 会触发 fail 的回调，对于 always 方法,deferred 对象,无论是 resolve 还是 reject ，都会触发该方法的回调。

ES6 Promise

前面讲了很多jquery的promise实现，$.Deferred 和 ES2015 的 Promise 是不同的东西，因为前者不符合 Promises/A+ 规范。 Promise 对象在 EMCAScript 2015 当中已经成为标准。现在要来谈谈马上要成为主流趋势的es6原生promise对象，首先贴一个很详细的es6 promise的小书，基本你知道的不知道都在里面 http://liubin.org/promises-book/#introduction。

阮一峰大神的关于ES6的promise解释 http://es6.ruanyifeng.com/#docs/promise。

定义

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
特点：

• 有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。
• 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

var promise = new Promise(function(resolve, reject) {  // ... some code  if (/* 异步操作成功 */){    resolve(value);  } else {    reject(error);  }});

then方法

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

function timeout(ms) {  return new Promise((resolve, reject) => {    setTimeout(resolve, ms, 'done');  });}timeout(100).then((value) => {  console.log(value);});

异常处理

　　异常处理一直是回调的难题，而promise提供了非常方便的catch方法：在一次promise调用中，任何的环节发生reject，都可以在最终的catch中捕获到：

Promise.resolve().then(function(){    return loadImage(img1);}).then(function(){    return loadImage(img2);}).then(function(){    return loadImage(img3);}).catch(function(err){    //错误处理})

基本的 api

• Promise.resolve()
• Promise.reject()
• Promise.prototype.then()
• Promise.prototype.catch()
• Promise.all()

- Promise.race()

具体的很多的用法可以参考阮一峰的 http://es6.ruanyifeng.com/#docs/promise 入门教程