Angular:Promise实例解析

最近还在研究angularjs框架,发现了Coursera上的一个项目,某个以色列大哥(他本身是知名大学的教授,同时也是某软件公司的director)讲的,这个课讲的理论深度非常的深。其实前端往往被认为是没什么深度,但是那只是在应用层面,如果只是简单的学习某个框架的API的使用方法,真的不难。但是如果能从软件工程的角度去理解和分析,某个优秀的前端框架的设计思路,这个过程的学习就会非常的有挑战和深度。

比如关于promise这个点,这个大哥讲的就非常的细致和有层次。把其中的思路记录如下:

首先promise去替代回调函数,是因为回调函数有一些明显的问题,比如异步的结果很难直接轻松的传给调用者;另外,如果是多个异步操作串联的操作,最后的代码结构会很复杂,可读性太差了。

Promise已经是ES6的标准了,但是并不是所有的浏览器都能很好的支持,所以angular框架里有了自己的promise系统。首先是promise的定义:

Promise: object which can be passed around or returned that holds reference to the outcome of asynchronous behavior.

angular项目中使用promise的方法是通过内置的$q服务来完成的:

第一步:在异步处理的函数内部,构建promise的逻辑,主要通过$q的几个接口API: $q.defer(), .resolve(), .reject().promise.

1

第二步:使用promise对象,处理结果

2

另外,除了这个基本的使用方法之外,还有两种高阶的使用方法,首先promise是可以chain起来的,因为then本身也会返回一个promise,所以对这个promise也可以用then来操作,如下:

3

还有,如果多个promise之间没有彼此依赖的关系,那末可以并行处理,这样更加节省时间:

4此处要用到$q.all()方法。

在下面这个例子中,dataCheckService是一个服务,它的两个方法checkNamecheckQuantity是两个异步处理的函数,需要使用$q来构建相应的逻辑。这里是用$timeout服务来模仿异步操作。具体可以看一下它的promise的逻辑都是什么,如下:

5

6

然后在controller中使用这个服务的这两个异步处理函数,这里有三种方法。

第一种,基本法:

7

checkName会返回第一个promise,然后在这个promisethenresolve函数中,调用第二个异步函数checkQauntity,然后得到nextPromise,这是第二个promise,同样的方法进行处理。

这种基本法的问题是,明明是使用了promise,但是看着特别像callback那种模式。

demo地址:https://jsfiddle.net/baoqger/2hqb5vha/1/

第二种方法:promise chain

8

在第一个promiseresolve函数中,直接返回第二次异步函数的结果,这样就可以再chain上一个then函数了。而且这种方法的好处是,不用给每个promise去处理各自的reject情况,只需要在最后加上一个catch函数就可以处理所有的reject情况。这种方法可以让code看起来是同步处理的风格了

Demo地址: https://jsfiddle.net/baoqger/u3g3d2vp/2/

第三种方法:all并行处理

9

先得到两个独立的promise:namePromisequantityPromise,因为这两个promise之间没有依赖关系,使用all的话,只有这两个promise都是resolve才会按照resolve来处理,有任何一个reject了,就可以直接推到catch里。这样的并行处理,还能节省时间,如果短时间的那个promisereject的,那末就直接reject了,不用等其他的promise结果。

Demo地址:https://jsfiddle.net/baoqger/bevbehyn/

Knockout.js美食搜索WebApp开发记录

这是当时Udacity那个program中难度最大的一个项目了,当时看的话就是没有给任何的starter code,完全从scratch开始做项目,现在想来也是太正常了。

这个应该采用了program中推荐的Knockout.js框架,应该是很老的一个框架了,对于框架本身就是简单的应用了,没有类似angular这样的研究程度。

另外,就是使用了Google Map提供的一系列的APIs,添加marker标记、街景图、信息提示图、测量距离等等。感受到一款优秀地图产品的复杂。

项目在线路径:https://baoqger.github.io/Restaurant-Finder/

Angular空气质量查询WebApp开发记录

这是最开始接触AngularJS的时候做的一个项目,具体的实现方法其实很稚嫩,但是还是把它部署出来:https://baoqger.github.io/Angular-Air-Quality-Index-Checker/,这个app利用了很多第三方的API和JS库,是比较值得记录的地方:

MapQuest API: the geocoding part is done with mapquest API. 这个API主要处理geocoding的部分,也就把城市名称转化为经纬度坐标。这个经纬度坐标会作为输入提供给后面的连个API。

BreezoMeter: the Air Quality Data is requested from breezometer API.这个API是核心部分,获取空气质量指数的数据就靠它了。

Google Map API: the map information is based on Google Map API. Google Map API无需多言。

ZingChart: the interative chart is build with zingchart library and zingchart-angularjs extension. 这是一个制图的JS库,能够弄出交互性这么好的曲线就靠它了。

另外,刚刚部署完成的时候,报了一个mixed content的问题。这个的原因也比较容易就是:gibhub pages本身是采用的https协议,但是我的app里需要外部数据,是通过像第三方API发送http请求完成的。这个http请求就跟本身的https发生了冲突,也就是所谓mixed的由来。

解决方法挺容易的,加一个meta标签就好了,如下:

<meta http-equiv=”Content-Security-Policy” content=”upgrade-insecure-requests”> 

具体详见下面这篇文章:http://thehackernews.com/2015/04/disable-mixed-content-warning.html

angular版拉勾web app开发项目

这个本身是imooc上的一个实战项目课程,为了全面深入的研究angular框架,想看看别的高手是如何理解框架的机制的。整个项目下来,还是有很大收获的:

https://baoqger.github.io/Angular-LaGou/

首先,按照angular框架的MVVM思路来进行项目的开发。在原本的课程中,讲师基本没有自定义service,而是把所有的业务逻辑、大量的异步http请求都放到了controller中。按照MVVM的思路,这些东西应该放到service中,然后注入到相应的controller中,这样可以实现代码的复用。另外,对于http请求的东西,可以放到route的resolve属性中进行,这是一个很好的用法。

第二,项目里大量地使用了自定义的指令和服务等。对于父级controller和isolated的指令域的通信方法,有了更深的理解。

第三,这个项目中利用了less预处理样式语言,还是蛮方便的,算是一次新的尝试。

第四,整个项目的开发过程中,充分使用了gulp来实现前端开发的工程化。感受到前端工程化确实能够让开发高效的太多了。

第五,项目的最终结果部署到了github的gh-pages服务上。轻松的得到了一个live demo。这个过程中还对git的使用,变得更加上手了。

happy coding!