ionic入门教程第五课-举例子说明异步回调$q及$q在项目中的用法

时间:2023-01-30 22:19:40

继上一节中我们使用到$q来辅助完成了按需加载文件。

这节课我先简要的介绍一下$q

先从功能上做简要介绍的话:

我想通过一个故事来简要的介绍$q,就那最近比较普遍的叫餐服务举例吧

今天我想吃牛肉炒饭,所以我打电话订餐跟老板说了,餐弄好了给我送到我公司来,我给了他一个明确的地址。这个过程就是$q.defer.

因为炒饭不是点了能到,要等待厨师加工和送餐,所以这一个延期响应的请求。

餐馆老板跟我说,等饭炒好了,马上给您送过去。也就是老板给了我一个承诺,promise

这样这个延期请求就算建立完成了。就是一个deferred。

这样我就可以继续工作了。说明这个请求是个异步执行的过程。

这样在一段时间后,饭炒好了,老板给我送到了公司,我收下了炒饭,这个过程称为deferred.resolve(data),响应了已处理事件

假如老板接完电话,到厨房看发现没有牛肉了,所以他又打电话给我说做不了了,也就是拒绝我的请求了,就是deferred.reject(error).

老板可以再任何时候跟我说做不了,只要在他还没把饭送来之前都可以。

如果老板好心实时的跟我们汇报,比如饭烧好了,正在配送,快到楼下了之类的,也就是通知。deferred.notify(data)

这样整个异步回调过程就完成了。

然后我吃了这家的牛肉炒饭觉得很好吃,于是我邀请了我几个同事跟我一起订餐,但是他们是通过我一个人发起的订单。所以我就可以发起$q.all(req1,req2,req3.)

这样老板可以再我要的东西全部完成之后一起给我。

同样的淘宝收快递什么的也是这个道理。稍微理解一下就好了。


接下来我们从语法上介绍一下$q:

$q主要解决的是异步编程的问题,是指描述通过一个承诺行为与对象代表的异步执行的行动结果的交互,可能会也可能不会再任何时候完成。

在一般的js变成中,我们常常使用callback的方式来执行异步回调。在ionic中我们可以考虑使用$q这种链式的编程方式来代替callback,这样有利于代码结构的清晰和开发调试的遍历。

查看详细的说明可以自行查阅API文档,我这里简要的说明用法。

还是继续拿上次用过的tabs类型的新建项目说明,我是在上次的项目Demo基础上修改的,但是修改的地方不相关。

首先新建的项目里面就一个服务Chats。

我们在服务中这样定义,在请求开始之间建立deferred,然后return deferred.promise.在获取到数据的时候deferred.resolve(data)

原始服务是这样子的

ionic入门教程第五课-举例子说明异步回调$q及$q在项目中的用法

修改后的服务是这样的

ionic入门教程第五课-举例子说明异步回调$q及$q在项目中的用法

这样服务的deferred就建立完成了,接下来我们来看一下怎么使用。

ionic入门教程第五课-举例子说明异步回调$q及$q在项目中的用法

这样整个过程就完成了。

真是的项目中我们的数据都是通过向服务器的请求来获取的,下一节课,我将简单的介绍$http的内容。

本节修改的地方比较简单,可以不下载Demo

项目Demo地址:http://pan.baidu.com/s/1c2z6qDq
如果你还有什么其他的问题,可以通过以下方式找到我新浪微博:小虎Oni微信公众号:ionic__

有其他问题的可以关注一下公众号提问(右侧双下划线):ionic__

ionic入门教程第五课-举例子说明异步回调$q及$q在项目中的用法

ionic入门教程第五课-举例子说明异步回调$q及$q在项目中的用法