AngularJs 无法 return 来自函数的数据

Question

我正在尝试 return 来自函数 getShiftDetails() 的数据

SS_Mod_App.controller("SS_Ctrl", function ($scope, $http, $location, $window, $sce) {

     var ShiftDetails = []; var ShiftDtls = [];

    ShiftDtls = getShiftDetails();
      //  alert(ShiftDtls);  -->  ShiftDtls undefined
        insertDaysHtml(ShiftDtls);  

function getShiftDetails() {
        $http({
            method: 'GET',
            url: 'http://xxxxx/api/Shift/GetShiftDetails',
            params: { }
            , headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' }
        }).then(function successCallback(response) {
            ShiftDetails = response.data;               --> successful response with data     
            alert(JSON.stringify(ShiftDetails.length));    -->  getting length 21 here
            return ShiftDetails;  
        }, function errorCallback(response) {  });
    }

并想将它传递给下一个函数 insertDaysHtml，我想在其中迭代它并获取 ShiftDetails 的数据，如下所示，但出现如下错误。

 function insertDaysHtml(ShiftDtls) {    
        alert(JSON.stringify($scope.ShiftDetails.length));   --> Length "0" here
    //alert(JSON.stringify(ShiftDtls.length)); Error msg: TypeError: Cannot read property 'length' of undefined
    // if (ShiftDtls.length > 0) {  --> Error msg: TypeError: Cannot read property 'length' of undefined

        if ($scope.ShiftDtls.length > 0) {  
           // alert(ShiftDtls.length );
            dayhtmlContent = dayhtmlContent + '<tr> '
            for (var j = 0; j <= ShiftDtls.length; j++) {
                dayhtmlContent = dayhtmlContent + '<td> $scope.ShiftDtls[ ' + j + '].ShiftName[0]));'                 
            }

        $scope.divHtmlDay = $sce.trustAsHtml(dayhtmlContent);
    }

Answer 1

getShiftDetails 正在使用 Promise 进行异步调用。您可以阅读有关 Promise 和 JavaScript 中的异步如何工作的说明。但要回答你的问题，

ShiftDtls = getShiftDetails();

如果您看到函数的主体 getShiftDetails，它不会返回任何内容。所以，你得到 undefined.

要使其正常工作，请在 successCallback 中执行操作而不是返回值。

Answer 2

首先，你没有从getShiftDetails()函数返回任何东西。所以，你需要像这样添加一个 return 语句：

function getShiftDetails() {
  return $http({
    method: 'GET',
    url: 'http://xxxxx/api/Shift/GetShiftDetails',
    params: {},
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
      'dataType': 'json'
    }
  }).then(function successCallback(response) {
    ShiftDetails = response.data;
    -- > successful response with data
    alert(JSON.stringify(ShiftDetails.length));
    -- > getting length 21 here
    return ShiftDetails;
  }, function errorCallback(response) {});
}

其次， 您的 getShiftDetails() 函数正在使用 Promise 进行异步调用。因此在获取数据之前执行下面的语句

ShiftDtls = getShiftDetails();
//  alert(ShiftDtls);  -->  ShiftDtls undefined
insertDaysHtml(ShiftDtls); 
//this statement is executing before getting data

因此，一种可能的解决方案是从已解析的请求函数中调用 insertDaysHtml() 函数。像这样：

function getShiftDetails() {
  $http({
    method: 'GET',
    url: 'http://xxxxx/api/Shift/GetShiftDetails',
    params: {},
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
      'dataType': 'json'
    }
  }).then(function successCallback(response) {
    ShiftDetails = response.data;
    -- > successful response with data
    alert(JSON.stringify(ShiftDetails.length));
    -- > getting length 21 here
    insertDaysHtml(response.data); //invoke function from here
  }, function errorCallback(response) {});
}

希望这对您有所帮助。谢谢！

Answer 3

要理解会发生什么，想象一下 HTTP 做了很长时间运行，而不是在您的本地主机上做一个圆圈，这需要很多时间。在 javascript 中，这是通过异步调用实现的，因此程序在等待响应时不会被阻塞，当响应最终出现时，它会在所谓的回调函数中进行处理。要强制控制器等待响应，您必须使用 Promises。

// Service
YearService.getCurrentYearId = function(){
  var defferer = $q.defer();
  $http.get('years')
    .then(function(response){
      deffer = response;
  });
  return defferer.promise;
};
  
 // Controller
function getData(){
  YearService.getYears()
    .then(function(data){
      YearCtrl.years = data;
  });
}

我必须注意的另一件事：您代码中的行：

return ShiftDetails;

这是严重错误的，您正试图从函数内部的函数 return。 javascript中有很多回调函数，它们不容易保持干净，但你必须多了解它们，因为它们真的很有用。它们不是你调用的，所以如果你尝试从它们 return，它们的响应不会被你的变量捕获，你想要从回调函数 return 的唯一原因是，如果你想在某个点停止执行，例如，如果您正在使用 forEach 函数，用于查找具有条件的数组中的第一个元素，您不想在找到第一个满足条件的元素后检查元素条件，像这样：

var first;
elements.forEach(function(element) {
  if(isFirst(element)){
    first = element;
    return;
  }
});

AngularJs 无法 return 来自函数的数据

AngularJs unable to return data from the function

javascript

function

angularjs

angularjs-scope