Question

我在通过一系列Common Function将数据从Web API返回到Angular Form时遇到了问题。我以最简单的形式提供代码来理解问题： -

HTML表单： -

<label>Request Number</label>
<input type="text" id="txtRequestNum" ng-model="md_reqnumber" />
<label>Employee Number</label>
<input type="text" id="txtEmployeeId" ng-model="md_number" ng-disabled="true" />

Controller.js

var myApp = angular.module('appHome');
myApp.controller("ctrlEmployeeAdd", ['$scope', 'CommonFunctionFactory', function ($scope,  CommonFunctionFactory) {
    CommonFunctionFactory.AddMasterData($scope.md_reqnumber)
        .then(function (dataSuccess) {
            $scope.number = dataSuccess;
        }, function (dataError) {
        });
}]);

CommonFunctionFactory.js

var appService = angular.module('appHome');
appService.factory('CommonFunctionFactory', ['MetadataOrgFactory', function (MetadataOrgFactory) {
    var dataFactory = {};

    dataFactory.AddMasterData = function (objData) {
        MetadataOrgFactory.postApiCall('addemployee', objData, function (dataSuccess) {
            alert("The request has been completed succesfully");
            return dataSuccess; 
        }, function (dataError) {
        });
    }
    return dataFactory;
}])

ApiCallService.js

var appService = angular.module('appHome');
appService.factory('MetadataOrgFactory', ['$http', '$q', function ($http, $q) {
    var dataFactory = {};
    var url = 'http://localhost:XXXXX';

    dataFactory.postApiCall = function (controllerName, objData, callbackSuccess, callbackError) {

        $http.post(url + '/api/' + controllerName, objData).then
            (function success(response) {
                alert("Success");
                callbackSuccess(response.data);
            }, function error(response) {
                callbackError(response.status);
            });
    };

    return dataFactory;
}])

WebApi.cs

[Authorize]
[Route("api/addemployee")]
[HttpPost]
public int AddEmployee(EmployeeViewModel vmEmployee)
{
    return 54302 //Just for simplicity here, returning hard coded value
}

我能够在 ApiCallService.js 中获得上述硬编码值，并且还能够进入 CommonFunctionFactory.js的 datasuccess 变量但无法将值返回 Controller.js 。这是我的实际问题。

Controller.js 中定义的角度承诺在从Web API获取响应后发出以下错误： -

无法读取属性＆＃39;然后＆＃39;未定义的

请帮我解决问题。

Answer 1

正如AnthW指出的那样，你非常接近，但我认为你的问题围绕着你的存在而不是回归。我的更改如下，它不需要更改您的controller.js或服务器文件，只需要更改两个工厂。

<强> CommonFunctionFactory.js

为此，我个人会删除这个工厂，但如果你想保留它，我只会返回$ http调用，这样你在控制器中可以使用then并访问返回的变量。 / p>

var appService = angular.module('appHome');
appService.factory('CommonFunctionFactory', ['MetadataOrgFactory', function (MetadataOrgFactory) {
    var dataFactory = {};

    dataFactory.AddMasterData = function (objData) {
        return MetadataOrgFactory.postApiCall('addemployee', objData);
    }
    return dataFactory;
}])

<强> ApiCallService.js

正如AnthW在他的回答中指出的那样，你没有返回$ http调用，这就是你看到未定义的原因。此外，当您使用promises时，没有理由使用回调函数，promises只是处理相同用例的不同方式。在这段代码中，我正在删除你的回调，我们正在返回promise，而promise将返回成功对象或错误对象。

var appService = angular.module('appHome');
appService.factory('MetadataOrgFactory', ['$http', '$q', function ($http, $q) {
    var dataFactory = {};
    var url = 'http://localhost:XXXXX';

    dataFactory.postApiCall = function (controllerName, objData) {

        var promise = $http.post(url + '/api/' + controllerName, objData)
            .then(function(response) {
                alert("Success");
                return response.data;
            }, function(response) {
                return response.status;
            });

        return promise;
    };

    return dataFactory;
}])

因此，总而言之，我的更改是让您的ApiCallService.js返回$http创建的承诺。 CommonFunctionFactory.js只会处理将此承诺返回给控制器。在您的控制器中，您已经在期待一个承诺，因此这个返回的承诺将在您的控制器中正确访问，并且您将能够检索返回的值。

Answer 2

postApiCall函数没有返回任何内容。您需要返回$http：

dataFactory.postApiCall = function (controllerName, objData, callbackSuccess, callbackError) {
  return $http.post(url + '/api/' + controllerName, objData)
    .then(function success(response) {
      alert("Success");
      callbackSuccess(response.data);
    },
    function error(response) {
      callbackError(response.status);
    });
};

然后，您需要在MetadataOrgFactory.postApiCall之前添加一个返回来执行相同操作：

return MetadataOrgFactory.postApiCall('addemployee', objData, function (dataSuccess) {
  alert("The request has been completed succesfully");
  return dataSuccess; 
  },
  function (dataError) {}
);

现在，您已返回请求，因此调用CommonFunctionFactory.AddMasterData($scope.md_reqnumber)将提供then方法。

我想它之前只是返回undefined。您可以通过注销CommonFunctionFactory.AddMasterData($scope.md_reqnumber)

的值来查看

如何通过后续服务调用返回HTTP响应

2 个答案: