`

形象的讲解angular中的$q与promise

阅读更多
promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多。promise全称是 Futures and promises。具体的可以参见 http://en.wikipedia.org/wiki/Futures_and_promises

而在javascript世界中,一个广泛流行的库叫做Q 地址是https://github.com/kriskowal/qangular中的$q就是从它引入的。promise解决的是异步编程的问题,对于生活在同步编程世界中的程序员来说,它可能比较难于理解,这也构成了angular入门门槛之一,本文将用生活中的一个例子对此做一个形象的讲解。

假设有一个家具厂,而它有一个VIP客户张先生。

有一天张先生需要一个豪华衣柜,于是,他打电话给家具厂说我需要一个衣柜,回头做好了给我送来,这个操作就叫$q.defer,也就是延期,因为这个衣柜不是现在要的,所以张先生这是在发起一个可延期的请求。

同时,家具厂给他留下了一个回执号,并对他说:我们做好了会给您送过去,放心吧。这叫做promise,也就是承诺。

这样,这个defer算是正式创建了,于是他把这件事记录在自己的日记上,并且同时记录了回执号,这叫做deferred,也就是已延期事件。

现在,张先生就不用再去想着这件事了,该做什么做什么,这就是“异步”的含义。

假设家具厂在一周后做完了这个衣柜,并如约送到了张先生家(包邮哦,亲),这就叫做deferred.resolve(衣柜),也就是“已解决”。而这时候张先生只要签收一下这个(衣柜)参数就行了,当然,这个“邮包”中也不一定只有衣柜,还可以包含别的东西,比如厂家宣传资料、产品名录等。整个过程中轻松愉快,谁也没等谁,没有浪费任何时间。

假设家具厂在评估后发现这个规格的衣柜我们做不了,那么它就需要deferred.reject(理由),也就是“拒绝”。拒绝没有时间限制,可以发生在给出承诺之后的任何时候,甚至可能发生在快做完的时候。而且拒绝时候的参数也不仅仅限于理由,还可以包含一个道歉信,违约金之类的,总之,你想给他什么就给他什么,如果你觉得不会惹恼客户,那么不给也没关系。

假设家具厂发现,自己正好有一个符合张先生要求的存货,它就可以用$q.when(现有衣柜)来把这个承诺给张先生,这件事就立即被解决了,皆大欢喜,张先生可不在乎你是从头做的还是现有的成品,只会惊叹于你们的效率之高。

假设这个家具厂对客户格外的细心,它还可能通过deferred.notify(进展情况)给张先生发送进展情况的“通知”。

这样,整个异步流程就圆满完成,无论成功或者失败,张先生都没有往里面投入任何额外的时间成本。

好,我们再扩展一下这个故事:

张先生这次需要做一个桌子,三把椅子,一张席梦思,但是他不希望今天收到个桌子,明天收到个椅子,后天又得签收一次席梦思,而是希望家具厂做好了之后一次性送过来,但是他下单的时候又是分别下单的,那么他就可以重新跟家具厂要一个包含上述三个承诺的新承诺,这就是$q.all(桌子承诺,椅子承诺,席梦思承诺),这样,他就不用再关注以前的三个承诺了,直接等待这个新的承诺完成,到时候只要一次性签收了前面的这些承诺就行了。
分享到:
评论

相关推荐

    浅谈Angular的$q, defer, promise

    $q是Angular的一种内置服务,它可以使你异步地执行函数,并且当函数执行完成时它允许你使用函数的返回值(或异常)。 2. defer defer的字面意思是延迟,$q.defer() 可以创建一个deferred实例(延迟对象实例)。 ...

    Angular中的Promise对象($q介绍)

    在ES6中,Promise已经成为内置对象,提供了与AngularJS中`$q`类似的功能。不过,AngularJS的`$q`服务与浏览器原生Promise的主要区别在于 `$q` 是基于AngularJS的事件循环 `$apply()` 进行更新的,这使得它更适合于...

    NG_Promises:致力于理解Angular Promise,特别是Angular $ q服务

    本篇文章将深入探讨Angular中的Promise,特别是其内置服务——$q,以及如何在实际开发中有效地使用它们。 一、Promise的基本概念 Promise是JavaScript ES6引入的一个新特性,用于解决回调地狱问题。它代表了一个...

    Angular异步变同步处理方法

    Angular框架中提供了$q服务来支持Promise,$q服务是AngularJs中自己封装实现的一种Promise实现。$q服务提供了defer()、all()和when()等方法。其中,defer()方法可以创建一个deferred对象,这个对象包括resolve、...

    Angular使用$http.jsonp发送跨站请求的方法

    Angular中使用$http.jsonp发送跨站请求的实践中,遇到了下面的一些问题: 1. 不是所有返回json格式的url都支持jsonp,服务器端需要支持从url中读取返回函数并用它封装json数据。 2. AngularJS v1.6.1中,url中不能...

    Angular的$http的ajax的请求操作(推荐)

    在AngularJS框架中,$http服务是用于进行Ajax请求的核心组件。...在本文中,我们将深入探讨Angular的$http服务,以及如何...通过熟练掌握$http服务,开发者能够在Angular应用中流畅地与服务器进行通信,实现丰富的功能。

    Angular中$broadcast和$emit的使用方法详解

    要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应。 broadcast译为广播,即上级传递下级。 示例代码: [removed][removed] [removed] angular....

    Angular4 Http

    在Angular4中,HTTP模块是与服务器进行数据交互的核心组件,它允许我们发送HTTP请求并处理响应。本篇文章将深入探讨Angular4中的HTTP模块,包括其基本用法、配置和最佳实践。 ### 1. 引入HTTP模块 首先,我们需要...

    angular-$watch 多种监视

    Angular项目中$scope.$apply()方法的使用详解

    主要给大家介绍了关于Angular项目中$scope.$apply()方法使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Angularjs具有一定的参考学习价值,需要的朋友们下面跟着小编一起来看看吧。

    angular中文文档

    Angular是一款由Google维护的开源JavaScript框架,...总之,Angular中文文档是开发者学习和进阶的重要资源,它涵盖了从基础知识到高级特性的全方位讲解,结合实际项目练习,将有助于你成为一名熟练的Angular开发者。

    angular6 中文官方文档

    Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身使用 TypeScript 写成 的。它将核心功能和可选功能作为一组 TypeScript 库进行实现,你可以把它们导入你的应用中。 Angular 的基本...

    Angular的$http与$location

    在AngularJS中,`$http`服务是用于与服务器进行HTTP通信的核心组件,它提供了对GET、POST、PUT、DELETE等HTTP方法的便捷支持。在上述示例中,我们看到了如何在控制器中注入并使用`$http`服务来发送GET请求获取数据。...

    详解Angular.js的$q.defer()服务异步处理

    `$q` 服务是Angular提供的一个内置服务,它提供了与Promise相关的功能,包括创建、管理和组合异步操作。 在给定的代码示例中,我们看到一个名为 `getBase64` 的函数,其目的是将图片转换为Base64编码。在这个过程中...

    详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧;  首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();...

    Angular中的$watch方法详解

    Angular中的$watch方法详解 Angular中的$watch方法是AngularJS框架中的一种重要机制,用于监听模型的变化,并在变化时触发某些事件。下面将对$watch方法进行详细的介绍。 一、$watch方法简介 $watch方法是...

    angular系统讲解demo

    本篇将深入解析 Angular 的核心概念,并通过提供的 "demo" 压缩包中的示例代码进行实战讲解。 **一、Angular 的基础架构** Angular 的核心组成部分包括模块(Module)、组件(Component)、服务(Service)、指令...

Global site tag (gtag.js) - Google Analytics