AngularJS:如何运行具有依赖项的函数 [英] AngularJS: How to run functions with dependencies

问题描述

当这两个参数调用promise方法时，当这两个参数作为AngularJS中先前函数的结果返回时，我如何运行带有两个参数的函数"searchBoats"?

how can I run a function "searchBoats" with two parameters when these two parameters are returned as results from previous functions in AngularJS when these two functions are calling promise methods?

var parseURL = function() {                         
    var language = $routeParams.language;                           
    var url = $location.path(); 
    boatType = parseBoatType(url, language);
    var destination = parseDestination(url, language);
    searchBoats(destination, boatType);                                                                 };      

    parseURL();

    var parseBoatType = function(url, language) {
        var boatType = UrlService.parseUrlBoatType(url, language);                                      

        var boatTypeParsed = UrlService.parseBoatType(url, language);           

        // boat type is parsed
        if(boatTypeParsed) {
            BoatType.getBoatTypeByName({name: boatTypeParsed}, function success(result) {
                boatTypeAux = result;                   
                return boatTypeAux;
            });
        } 

        else {
            return null;
        }       
    };

    var parseDestination = function(url, language) {

        // departure is parsed
        var departure = UrlService.parseUrlDeparture(url);
        return $http.get("http://" + API_SERVER_URL + "/translatedDepartures?departure="+departure+";lang="+ language+";matchStart="+true).then(function(response) {                        
            departure = response.data.map(function(source) { 
                return source.element_translation; 
            });

            ...

注意:当我在parseBoatType函数中运行BoatType.getBoatTypeByName时，代码仍在运行，并且在获得结果之前先运行searchBoats.

Note: When I run BoatType.getBoatTypeByName in parseBoatType function the code is still running and I run searchBoats before I get the results.

更新:

searchBoats方法如下:

var searchBoats = function(destination, boatType) { 

    Boat.query({
        destination: destination, 
        boatType: boatType
    }, function success(result) {
        console.log("getOptionList.query realizada");
        $scope.boats = result;           

        ...

根据您的回答，我有一个回调 BoatType.getBoatTypeByName({name:boatTypeParsed}，function success(result){boatTypeAux = result; 调用我的api的工厂服务:

According to your answer I have a callback BoatType.getBoatTypeByName({name: boatTypeParsed}, function success(result) { boatTypeAux = result; calling to a factory service to my api:

angular.factory('BoatType',
    function ($resource, SERVER_URL) {
        var boatTypes =
            $resource('http://' + SERVER_URL + '/:action', {
                action: 'boat_types'
            }, {
                query: {
                    method: 'GET',
                    isArray: true
                },
                getBoatTypeById: {
                    method: 'GET',
                    params: {
                        action: 'getBoatTypeById'
                    },
                    isArray: false
                },
                getBoatTypesById: {
                    method: 'GET',
                    params: {
                        action: 'getBoatTypesById'
                    },
                    isArray: true
                },
                getBoatTypeByName: {
                    method: 'GET',
                    params: {
                        action: 'getBoatTypeByName'
                    },
                    isArray: false
                }
            });
        return boatTypes;
    }
)

新更新根据@ zero298的评论，现在我的代码如下:

New update According to the comments of @zero298, now my code looks like this:

  var parseURL = function() {                           
        var language = $routeParams.language;                           
        var url = $location.path(); 

        // You need to wait on your async calls
        var boatsPromise = $q.all([
            parseBoatType(url, language),
            parseDestination(url, language)
        ]).then(function(resultArr){
            var boatType = resultArr[0],
                destination = resultArr[1];

            // Return something else to wait on
            return searchBoats(destination, boatType);
        });

   var parseBoatType = function(url, language) {

            BoatType.getBoatTypeByName({name: boatTypeParsed}, function success(result) {                   
                return result; 
            });
    };  

    var parseDestination = function(url, language) {            
        return "whatever";              
    };

// The service
.factory('BoatType', 

      function($resource, SERVER_URL){          
        var boatTypes =
         $resource('http://' + SERVER_URL +'/:action', {action:'boat_types'}, {       
            query: {method:'GET', isArray: true},                
            getBoatTypeByName: {method:'GET', params:{action: 'getBoatTypeByName'}, isArray: false}
         });        
         return boatTypes;           
      }
  )

尽管功能searchBoats等待执行parseBoatType和parseDestination，但请注意parseBoatType具有对服务的回调，并带有对API的$ resource调用(我认为这是异步的)，因此，在执行searchBoats函数之前回调获取结果.

Although, the function searchBoats waits until parseBoatType and parseDestination are executed, note parseBoatType has a callback to a service with a $resource call to an API (which I think is asynchnous), so as result, the searchBoats function is executed before the callback gets the result.

推荐答案

您没有在等待任何异步调用.查看 $ http 的文档，然后通过扩展 $ q .

You aren't waiting on any of your asynchronous calls. Look at the documentation for $http and by extension $q.

您需要执行以下操作:

function parseURL() {
    var language = $routeParams.language;
    var url = $location.path();

    // You aren't waiting on anything that is async

    // You need to wait on your async calls
    var boatsPromise = $q.all([
        parseBoatType(url, language),
        parseDestination(url, language)
    ]).then(function(resultArr){
        var boatType = resultArr[0],
            destination = resultArr[1];

        // Return something else to wait on
        return searchBoats(destination, boatType);
    });

    // Either wait on it here and do some more stuff
    boatsPromise.then(console.log);

    // Or return it so that something higher in the callstack can wait
    return boatsPromise;
}

您的 searchBoats 函数还应像 parseDestination 一样工作，并返回 $ q (承诺)以等待:

Your searchBoats function should also act like parseDestination and return a $q (Promise) to wait on:

function searchBoats(destination, boatType) {
    /*
     * I would recommend against putting stuff on to $scope
     * in an async chain unless you are at the very root
     * of the chain otherwise you lose context
     * and are unable to .then()
     */

    // Retun a then()able object
    return Boat.query({
            destination: destination,
            boatType: boatType
        },
        function success(result) {
            console.log("getOptionList.query realizada");
            return result;
        });
}

这篇关于AngularJS:如何运行具有依赖项的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！