JS异步那些事 三 (Promise)

JS异步那些事 一 (基础知识)
JS异步那些事 二 (分布式事件)
JS异步那些事 三 (Promise)
JS异步那些事 四(HTML 5 Web Workers)
JS异步那些事 五 (异步脚本加载)

Promise,Deferred 对象

前戏

先来谈谈jquery中的promise的使用,来看一个例子
原本写一个小动画我们可能是这样的

 

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


看了上面的例子大概对promise的作用有一定的了解了吧,那就来说说promis的原理吧

Promise对象方法

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

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

promise对象常见的方法有三个 : done , fail , then 。


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

deferred对象方法

deferred 对象呢,也就是使用 $.Deferred() 方法,以及 $.when() 等方法创造出来的对象,它可以理解为一个升级版特殊的的promise对象
来看看一个例子

  

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。

  

上面代码中,timeout方法返回一个Promise实例,表示一段时间以后才会发生的结果。过了指定的时间(ms参数)以后,Promise实例的状态变为Resolved,就会触发then方法绑定的回调函数。

异常处理

异常处理一直是回调的难题,而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 入门教程,还有就是上面提到的电子书 http://liubin.org/promises-book/#introduction。

你可能感兴趣的:(JS异步那些事 三 (Promise))