假设有这样的一个场景：
我们知道一个用户某次航班，抽象成一个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的参数。