AnguarJS中链式的一种更合理写法

假设有这样的一个场景:

我们知道一个用户某次航班,抽象成一个departure,大致是:

{userID : user.email,flightID : "UA_343223",date: "01/14/2014 8:00 AM"}

有关航班的,抽象成一个flight,大致是:

{id: flightID,pilot : "Captain Morgan", plane : {make  : "Boeing 747 RC",model : "TA-889"},status: "onTime"}

有关天气情况的,抽象成forecast,大致是:

{date: date,forecast : "rain"}

我们的需求是:

● 显示departure相关:departure.date
● 显示flight相关:flight.plane.make, flight.plane.model
● 显示foreacst相关:weather.forecast

实现逻辑大致是:

→ 根据departure中的flightID获取flight
→ 根据departure中的date获取forecast

首先模拟一些服务:

(function(angular){
angular.module("FlightServices",[])
.service("user", function(){
return{
email: 'exmaple@qq.com',
repository:"https://github.com/ThomasBurleson/angularjs-FlightDashboard"
};
})
.service("travelService", function(user, $q){
return{
//根据用户获取departure
getDeparture: function(user){
var defer = $q.defer(); defer.resolve({
userID : user.email,
flightID : "UA_343223",
date : "01/14/2014 8:00 AM"
});
return defer.promise;
},
getFlight: function(flightID){
return $q.resolve({
id : flightID,
pilot : "Captain Morgan",
plane : {
make : "Boeing 747 RC",
model : "TA-889"
},
status: "onTime"
});
}
};
})
.service("weatherService", function($q){
return {
getForecast: function(date){
return $q.resolve({
date : date,
forecast : "rain"
});
}
};
});
}(window.angular));

以上,模拟了一些数据,让我们最终能获取到如下数据:

有关用户的:

{
    email: 'exmaple@qq.com',
    repository:"https://github.com/ThomasBurleson/angularjs-FlightDashboard"
};

有关depature的,通过getDeparture(user)获取到一个promise

{
    userID   : user.email,
    flightID : "UA_343223",
    date     : "01/14/2014 8:00 AM"
}

有关depatrue的,通过getFlight(flightID)获取到一个promise

{
    id    : flightID,
    pilot : "Captain Morgan",
    plane : {
        make  : "Boeing 747 RC",
        model : "TA-889"
    },
    status: "onTime"
}

有关forecast的,通过getForecast(date)获取到一个promise

{
     date     : date,
     forecast : "rain"
}

接下来就从以上服务所提供的promise数据中获取,由于是promise,所有就可以then,可能会这样写:

var FlightDashboard = function($scope, user, travelService, weatherService){
$scope.user = user; travelService
.getDeparture(user.email) //第一个请求
.then(function(depature){
$scope.departure = depature; //第二个请求
travelService
.getFlight(departure.flightID)
.then(function(flight){
$scope.flight = flight; //第三次请求
weatherService
.getForecast(departure.date)
.then(function(weather){
$scope.weather = weather;
})
})
}) };

但以上写法的缺点是层级太多。一种更好的写法是:

(function(){
"use strict"; var FlightDashboard = function($scope, user, travelService, weatherService){
var loadDeparture = function (user) {
return travelService
.getDeparture(user.email)
.then(function(departure){
$scope.departure = departure;
return departure.flighID;
}); });
},
loadFlight = function(flightID){
return travelService
.getFlight(flightID)
.then(function(flight){
$scope.flight = flight;
return flight;
});
},
loadForecast = function(){
return weatherService
.getForecast($scope.departure.date)
.then(function(weather){
$scope.weather = weather;
return weather;
});
}; loadDeparture(user)
.then(loadFlight)
.then(loadForecast); $scope.user = user;
$scope.departure = null;
$scope.flight = null;
$scope.weather = null;
; window.FlightDashboard = ["$scope","user","travelService", "weatherService", FlightDashboard];
}());

以上,loadDeparture返回的flightID作为loadFligth的参数。

上一篇:【python之路26】模块


下一篇:Python之路(五)-->> 格式化