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的参数。