卡通方式趣解AngularJS中的promise

2013-11-18 10:49| 发布者: joejoe0332| 查看: 6693| 评论: 0|原作者: 蔡蔡|来自: 伯乐在线

摘要: 一天早晨，爹对儿子说：“宝儿，出去看看天气如何！”每个星期天的早晨，爹都叫小宝拿着超级望远镜去家附近最高的山头上看看天气走势如何，小宝说没问题，我们可以认为小宝在离开家的时候给了他爹一个promise。 ...

　　我们可以把孩儿他爹看成controller，小宝就是service。

　　整理逻辑：孩儿他爹让小宝去看天气，小宝不能立刻告诉他，但是孩儿他爹在等待结果的这段时间里可以抽抽烟，喝喝茶啥的，因为小宝承诺会把天气情况搞清楚。等小宝把天气预报带回来，他就可以决定下一步干啥。各位看官注意了：小宝登高望远看天气的时候并没有影响他爹干别的事情，这就是promise的妙处所在。

　　Angular里有个then()函数，我们可以决定孩儿他爹到底是用哪个计划(A，B，C)，then()接收两个functions作为参数，第一个在promise is resolved的时候执行，另一个在promise is rejected的时候执行

　　Controller: FatherCtrl

　　孩儿他爹掌控局面的代码如下：

                // function somewhere in father-controller.js
var makePromiseWithSon = function() {
// This service's function returns a promise, but we'll deal with that shortly
SonService.getWeather()
// then() called when son gets back
.then(function(data) {
// promise fulfilled
if (data.forecast==='good') {
prepareFishingTrip();
} else {
prepareSundayRoastDinner();
}
}, function(error) {
// promise rejected, could log the error with: console.log('error', error);
prepareSundayRoastDinner();
});
};
        

　　Service: SonService

　　小宝的作用就是充当了一个service，他爬上山头看天象，有点类似调用weather API，而且还是异步调用，他得到的结果可能是个变量，也有可能出现异常情况(比如,返回500—>大雾弥漫)。

　　从”Fishing Weather API”返回一个promise，如果it was resolved，就格式化成{“forecase”:”good”}。

                app.factory('SonService', function ($http, $q) {
return {
getWeather: function() {
// the $http API is based on the deferred/promise APIs exposed by the $q service
// so it returns a promise for us by default
return $http.get('http://fishing-weather-api.com/sunday/afternoon')
.then(function(response) {
if (typeof response.data === 'object') {
return response.data;
} else {
// invalid response
return $q.reject(response.data);
}
 
}, function(response) {
// something went wrong
return $q.reject(response.data);
});
}
};
});
        