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: '[email protected]',
                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: '[email protected]',
    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的参数。