Question

我正在与您联系，以获取有关AngularJS的$ promise问题的帮助。

以下是有关$ resource的文档信息，它也适用于$ http

话虽如此，我试图进行API调用并且成功时想要执行回调操作。由于操作是异步进行的，因此即使在API调用完成之前也会发生回调操作。这导致不正确的数据反射。这是一个简单的获取示例，使用$ resource和$ http。在这两种情况下，实际的期望是控制台日志应该显示实际数据，但它显示了promise数据，并导致在API调用完成之前调用回调函数

$http.get('../../../Employee/GetEmployees').success(function (data) {
        console.log(data);
    });


   return $resource('../../../Employee/GetEmployees', {},
        {
            query: { method: 'GET', isArray: true },
        });

我提供的示例只是为了给出清晰的图片，但我的实际问题是“PUT”（更新）。根据逻辑，更新必须首先通过API调用进行，然后需要将页面重定向到List页面，在该页面中将查询和呈现更新的数据。对此的任何建议将不胜感激。

 $scope.UpdateEmp = function () {
        var empl = $scope.Employee;
        empFactory.empUpdate.update({ EmpID: $routeParams.EmpID, empval: empl }).$promise.then(function () { // update method in my resource uses $resource
            $location.path('/EmpList'); //redirect to list
        });

P.S：暂时请留下URL，请将其显示为返回JSON对象的API。

这是完整的代码

这是完整的代码。

路由：

var myApp = angular.module('myApp', ['emp', 'ngRoute']);

myApp.config(function ($routeProvider) {

    $routeProvider
        .when('/',
        {
            templateUrl: 'pages/EmpList.html',
            controller: 'empController'
        }
        )
    .when('/EmpDetail/:EmpID',
    {
        templateUrl: 'pages/EmpDetail.html',
        controller: 'empDetailController'
    }
)
     .when('/EmpList',
    {
        templateUrl: 'pages/EmpList.html',
        controller: 'empController'
    }
    )
     .when('/EmpCreate',
    {
        templateUrl: 'pages/EmpCreate.html',
        controller: 'empCreateController'
    });

});

这是控制器方法

    myApp.controller('empController', function ($scope, $routeParams, $location, empFactories, empFactory, $http, empHttpFactory) {

            $scope.Employees = empFactories.query();

            $scope.edit = function (EmpID) {
            $location.path('/EmpDetail/' + EmpID);
        };


        $scope.Delete = function (empID) {
            empFactory.empDelete.del({ EmpID: empID }, function () {
                $location.path('/EmpList');
            });
        }

        $scope.Createnew = function () {
            $location.path('/EmpCreate');
        }


    });

    myApp.controller('empDetailController', function ($scope, empFactory,empFactories, $routeParams, $location) {

        $scope.Employee = empFactory.employee.show({ EmpID: $routeParams.EmpID });

        console.log($scope.Employee);

        $scope.UpdateEmp = function () {
            var empl = $scope.Employee;
            empFactory.empUpdate.update({ EmpID: $routeParams.EmpID, empval: empl }).$promise.then(function () { // update method in my resource uses $resource
                $location.path('/EmpList'); //redirect to list
            }); 

        };

    });

Here is the service

var myservice = angular.module('emp', ['ngResource', 'ngRoute']);
myservice.factory('empFactories', function ($resource) {
    return $resource('../../../Employee/GetEmployees', {},
        {
            query: { method: 'GET', isArray: true },
            create: { method: 'POST' }
        });
});

myservice.factory('empFactory', function ($resource) {



    //return $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID' },
    //      {
    //          show: { method: 'GET' }
    //      });


    var resource = {
        employee:
            $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID' },
           {
               show: { method: 'GET' }

           }),
        empUpdate:
            $resource('../../Employee/PutEmployee/:EmpID', { EmpID: '@EmpID', empval: '@empl' }, { update: { method: 'PUT', isArray: true } }),
        empDelete:
            $resource('../../Employee/DeleteEmployee/:EmpID', { EmpID: '@EmpID' }, { del: { method: 'DELETE', isArray: true } }),

        empCreate:
            $resource('../../Employee/CreateEmployee', { empval: '@empl' }, { create: { method: 'POST', isArray: true } })
    }

    return resource;
});

Answer 1

首先我看到一个设计问题，你的工厂不应该返回资源，应该返回承诺，

myservice.factory('empFactory', function ($resource) {

  var employeeResource  = $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID'}, {show: { method: 'GET' } }),
  updateResource = $resource('../../Employee/PutEmployee/:EmpID', { EmpID: '@EmpID', empval: '@empl' }, { update: { method: 'PUT', isArray: true } }),
  deleteResource = $resource('../../Employee/DeleteEmployee/:EmpID', { EmpID: '@EmpID' }, { del: { method: 'DELETE', isArray: true } }),
  createResource = $resource('../../Employee/CreateEmployee', { empval: '@empl' }, { create: { method: 'POST', isArray: true } });

  return { 
    getEmployee: function(id){
      return employeeResource.get({EmpID: id}).$promise;
    },
    updateEmployee: function(){
      return updateResource.update(...).$promise;
    }
  };
});

我认为问题在于你正在打电话

$scope.Employee = empFactory.employee.show({ EmpID: $routeParams.EmpID });

现在返回一个资源，因此从技术上讲，您无需在任何地方获得该员工。不是很清楚错误在哪里，您是否尝试并行执行多个资源请求？如果它使用$q.all([asyncCall1,asyncCall2,...]).spread(function(r1, r2, ...) {...});

此致

Answer 2

使用$ resource，您可以定义API路由以及API处理请求所需的参数。然后，稍后您将需要向$ resource提供数据并执行操作（获取，保存，查询，删除，删除）。

我个人更喜欢使用$ http，因为它非常干净。从根本上说，您无法在应用中预先定义路线和参数。

这是一支向您展示$ resource和$ http请求的笔。

http://codepen.io/kenhowardpdx/pen/BNzXeE

angular.module('app', ['ngResource']);

MyService.$inject = ['$http', '$resource'];
function MyService ($http, $resource) {
    var _this = this;

    var Search = $resource('http://www.omdbapi.com/?tomatoes=true&plot=full&t=:searchTerm', {searchTerm:'@searchTerm'});

    _this.httpSearch = function (searchTerm) {
        return $http.get('http://www.omdbapi.com/?tomatoes=true&plot=full&t=' + searchTerm);
    };

    _this.resourceSearch = function (searchTerm) {
        return Search.get({searchTerm: searchTerm}).$promise;
    }
}

angular.module('app').service('MyService', MyService);

MyController.$inject = ['MyService'];
function MyController (MyService) {
    var _this = this;

    _this.type = 'http';

    _this.searchFilms = function () {
        if (_this.type === 'http') {
            MyService.httpSearch(_this.searchTerm).then(function(_response) {
               _this.results = _response.data; 
            });
        } else {
            MyService.resourceSearch(_this.searchTerm).then(function(_response) {
               _this.results = _response; 
            });
        }
    }
}

angular.module('app').controller('MyController', MyController);`

Answer 3

工厂不需要返回承诺。我的意思是这取决于您如何管理工厂和控制器以及如何解决它。

您的工厂不会返回承诺而是资源，因此应在您的控制器中解决。你在控制器中的更新方法应该是这样的：

    $scope.UpdateEmp = function () {
    var empl = $scope.Employee;
    empFactory.empUpdate.update({ EmpID: $routeParams.EmpID, empval: empl }, function (successResponse) { // update method in my resource uses $resource
        $location.path('/EmpList'); //redirect to list
    },function (error) { 
     // do something on error callback
    });

阅读angularjs resource angularjs docs about $resource

Angular JS成功回调

3 个答案: