`

jQuery 中的 Deferred 和 Promises-Promises/A规范

阅读更多

  Javascript里异步编程逐渐被大家接受,先前大家一般通过回调嵌套,setTimeout、setInterval等方式实现,代码看起来非常不直观,不看整个代码逻辑很难快速理解。Javascript里异步函数大概有I/O函数(Ajax、postMessage、img load、script load等)、计时函数(setTimeout、setInterval)等。

  这些我们都很熟悉,在复杂的应用中往往会嵌套多层,甚至以为某些步骤未完成而导致程序异常,最简单的例子:比如你往DOM中注入节点,你必须等待节点注入后在操作这个节点,当大量节点注入的时候,时间往往很难把握。如果我们得代码依赖第三方api的数据。我们无法获悉一个API响应的延迟时间,应用程序的其他部分可能会被阻塞,直到它返回结果。Promises对这个问题提供了一个更好的解决方案,它是非阻塞的,并且与代码完全解耦 。

  那么,我看看Javascript里异步编程,首先推荐大家看看相对来说比较流行的Promises/A规范。

Promises/A规范

  注:为了便于理解,描述可能和Promises/A规范有所出入;

  CommonJS之Promises/A规范,通过规范API接口来简化异步编程,使我们的异步逻辑代码更易理解。

遵循Promises/A规范的实现我们称之为Promise对象,Promise对象有且仅有三种状态:unfulfilled(未完成)、fulfilled(已完成)、failed(失败/拒绝);初始创建的时候是unfulfilled(未完成)状态,状态只可以从unfulfilled(未完成)变成fulfilled(已完成),或者unfulfilled(未完成)变成failed(失败/拒绝)。状态一旦变成fulfilled(已完成)或者failed(失败/拒绝),状态就不能再变了。

  Promises/A规范提供了一个在程序中描述延时(或将来)概念的解决方案。主要的思想不是执行一个方法然后阻塞应用程序等待结果返回后再回调其他方法,而是返回一个Promise对象来满足未来监听。fulfilled状态和failed状态都可以被监听。Promise通过实现一个then接口来返回Promise对象来注册回调:

js 代码:

then(fulfilledHandler, errorHandler, progressHandler);

  then接口用于监听一个Promise的不同状态。fulfilledHandler用于监听fulfilled(已完成)状态,errorHandler用于监听failed(失败/拒绝)状态,progressHandler用于监听unfulfilled(未完成)状态。Promise不强制实现unfulfilled(未完成)的事件监听(例如我们知道旧版本的jQuery(1.5,1.6)的Deferred就是一个Promise的实现,但没有实现对unfulfilled(未完成)状态的监听来回调progressHandler)。

  一般认为,then接口返回的是一个新的Promise对象,而不是原来的Promise对象,这个新的新的Promise对象可以理解为是原来Promise对象的一个视图,它只包含原有Promise对象的一组方法,这些方法只能观察原有Promise对象的状态,而无法更改deferred对象的内在状态。这样可以避免多个调用者之间的冲突,多个调用者可以通过改变新的Promise对象状态而不影响别的调用者。

  另外,Promise提供了resolve(实现状态由未完成到已完成)和reject(实现状态由未完成到拒绝或失败)两个接口实现状态的转变。

  发一张图片帮助理解一下:


  有了Promise,就可以以同步的思维去编写异步的逻辑了。在异步函数里,不能使用try/catch捕获异常,也不能抛出异常。有了Promise,我们可以直接显式定义errorHandler,相当于捕获异常。

  以下是几个遵循Promises/A规范的类库,when,q,rsvp.js,jQuery.Deferred等等。

  各个Promises类库的比较可以查看:http://complexitymaze.com/2014/03/03/javascript-promises-a-comparison-of-libraries/?utm_source=javascriptweekly&utm_medium=email

 

文章来源:http://www.css88.com/archives/4743

  • 大小: 71.1 KB
分享到:
评论

相关推荐

    jqpromise.js:包装jQuery.Deferred以使其更像本机Promises

    当jQuery中埋藏了一个“足够好”的实现时,为什么还要加载一个单独的Promises poly-fill? 该包装器导出一个内部使用$ .Deferred的新构造函数。 不同之处在于,该参数与本机Promises使用的回调类型相同,而不是$ ....

    Javascript中的异步编程规范Promises/A详细介绍

    除了JavaScript原生实现的Promise外,还有许多库如when.js、Q.js、rsvp.js以及jQuery的`$.Deferred`实现了Promises/A规范。这些库提供了额外的功能和优化,以适应不同的开发需求。 总的来说,Promises/A规范为...

    15天学会jquery

    - 探讨jQuery的高级技术,如 Deferred 对象和 Promises。 - 关注jQuery的最新发展动态,理解未来的Web技术趋势。 通过这15天的学习,你将从一个jQuery新手成长为一个能够熟练运用jQuery进行高效Web开发的专业人士。...

    game-promises-and-defered:小动画,有点过分

    标题中的"game-promises-and-defered"可能是一个使用Promise和 Deferred实现的小游戏项目,通过游戏的形式帮助开发者理解这些概念。 Promise是ES6引入的特性,它代表一个异步操作的最终完成或失败,以及其对应的值...

    各种的jQuery版本和1.7的文档

    - jQuery 1.5:引入了 deferred 对象和 Promises API,为异步编程提供了更好的解决方案。 - jQuery 1.6:主要改进了`attr`和`prop`方法的区分,使属性和属性值的获取与设置更为精确。 - jQuery 1.7:这是一个重要...

    jQuery之Deferred对象详解

    jQuery中的Deferred对象是一个非常重要的概念,它用于处理异步操作,并且提供了一种统一的方式来处理这些操作的完成情况。在深入了解Deferred对象之前,我们需要明白什么是Promises以及它们解决了哪些JavaScript编程...

    jQuery中借助deferred来请求及判断AJAX加载的实例讲解

    在jQuery中,`deferred`对象是用来处理异步操作的工具,特别适合于解决复杂的回调地狱问题。在AJAX请求中,当需要确保一系列请求按照特定顺序执行时,`deferred`就能派上用场。AJAX默认使用异步加载(`async: true`...

    jQuery.deferred对象使用详解

    jQuery是一种流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互...由于deferred对象是对Promises接口的实现,它也成为了现代JavaScript异步编程模式的基石,被广泛应用于各种前端和Node.js编程中。

    以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题

    Promises是一种令代码异步行为更加优雅的抽象,它很有可能是JavaScript的下一个编程范式,一个Promise即表示任务结果,无论该...本文以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题,需要的朋友参考下

    jquery 1.5.2

    1. **Deferred 和 Promises**:在1.5.2版本中,jQuery引入了 Deferred 和 Promises 对象,这使得异步编程更加优雅。 Deferred 可以管理多个异步操作,并提供了一种统一的方式来处理它们的完成状态。Promises 是 ...

    Android代码-jdeferred

    JDeferred is a Java Deferred/Promise library similar to JQuery's Deferred Object. Inspired by JQuery and Android Deferred Object. Features Deferred object and Promise Promise callbacks .then(…) ....

    jQuery异步访问

    ### 六、jQuery promises 和 $.Deferred() jQuery 1.5引入了 Deferred 对象和 Promise API,使异步操作更易于管理。它们提供了链式调用、错误处理和多个异步操作的同步管理。 ### 七、跨域请求 通过设置 `...

    JQuery 1.5 API 中文版索引版

    2. **Deferred 和 Promises**:引入了 Deferred 对象和 Promise 接口,用于处理异步操作,如Ajax请求,使其更加链式化和易管理。 3. **Ajax优化**:改进了Ajax功能,支持JSONP跨域请求,并提供了更好的错误处理机制...

    media-uploader:使用 Backbone.js 的完整轻量级 JS 媒体上传器解决方案

    媒体上传器这个 repo 包含一个完整的、轻量级的 JS 媒体上传解决方案... 文件用于管理上传的 jQuery.Deferred 和 promises 主干视图、模型、集合和事件轻量级 - 代码尽可能干净和干燥“进度”和“完成”模板(下划线)

    50个Jquery经典实例

    37. **异步处理**:`async`和`deferred`对象用于处理异步任务,如`$.when.apply($, promises).done(function() {...})`。 38. **元素遍历方法**:`first()`, `last()`, `eq()`, `not()`等帮助筛选和操作元素集。 ...

    详解JavaScript异步编程中jQuery的promise对象的作用

    在JavaScript中,异步操作通常涉及到回调函数、事件监听、promises和async/await等技术。Promise作为JavaScript异步编程的一种重要模式,由jQuery引入并广泛应用于现代JavaScript库和框架中,如jQuery、Dojo等。 ...

    javascript学习指南之回调问题_.docx

    Promise的出现并非偶然,它的普及始于Dojo框架中的`dojo.Deferred`,然后在CommonJS Promises/A规范中进一步发展。jQuery的`$.ajax`方法也促进了Promise的广泛应用,尽管它并不完全遵循CommonJS规范。最终,Promise...

Global site tag (gtag.js) - Google Analytics