Question

我正在使用延迟保证，因为我需要应用程序等待异步调用的结果。该函数检索正确的数据，但我似乎无法将其返回给我的控制器。

具体来说，代码行

data : multiBarChartData

未从

获取已解析的数据

function multiBarChartData()

这是工厂：

angular.module('hapDash.services', []).factory('DataService', function ($http, $q, SESSION_ID) {

    return {
        multiBarChart : {
            data : multiBarChartData
        }
    };

    function multiBarChartData() {
        var deferred = $q.defer();
        $http({
            method : 'GET',
            url : '/services/data/v37.0/analytics/reports/00OP0000000Q9iB',
            headers : {
                'Authorization' : 'Bearer ' + SESSION_ID
            }
        }).success(function (data) {
            var report02ChartData = [];
            angular.forEach(data.groupingsDown.groupings, function (de, di) {
                var report02Values = [];
                report02ChartData.push({'key' : de.label, 'values' : report02Values});
                angular.forEach(data.groupingsAcross.groupings, function (ae, ai) {
                    report02Values.push({'x' : ae.label, 'y' : data.factMap[de.key + '!' + ae.key].aggregates[0].value});
                });
            });
            data = report02ChartData;
            deferred.resolve(data);
        }).error(function () {
            deferred.reject('There was an error accessing the Analytics API')
        })
        return deferred.promise;
    }
});

......这是控制器：

var app = angular.module('hapDash', ['config', 'nvd3', 'gridster', 'hapDash.services']);

app.controller('HapDashCtrl', function ($scope, $timeout, DataService) {

    $scope.dashboard = {
        widgets : [{
                col : 0,
                row : 0,
                sizeY : 1,
                sizeX : 1,
                name : "Multi Bar Chart",
                chart : {
                    data : DataService.multiBarChart.data(),
                    api : {}
                }
            }
        ]
    };

});

我正在尝试获取控制器代码

data : DataService.multiBarChart.data(),

一旦完成就拉出异步响应。

我做错了什么？

Answer 1

当承诺得到解决时，您需要初始化$scope.dashboard对象：

app.controller('HapDashCtrl', function($scope, $timeout, DataService) {

    DataService.multiBarChart.data().then(function(data) {
        $scope.dashboard = {
            widgets: [{
                col: 0,
                row: 0,
                sizeY: 1,
                sizeX: 1,
                name: "Multi Bar Chart",
                chart: {
                    data: data,
                    api: {}
                }
            }]
        };
    });

});

Answer 2

DataService.multiBarChart.data()

返回承诺而不是真实数据。您可以通过以下方式访问控制器中的实际数据：

DataService.multiBarChart.data().then(
  function(data) {
    /*do something with data*/
  }
).catch(
  function(err) {
    /*handle error*/
  }
);

此外，由于没有使用$http服务返回的承诺，因此违反了承诺链，因此您在这里遇到了一个着名的Promise anti-pattern。以下代码段不会破坏promise链，并且可以让您处理在单个catch块中可能发生的任何错误。

function multiBarChartData() {
  return $http(/*...*/).then(
    function (response) {
      var report02ChartData = [];
      .success(function (data) {
        var report02ChartData = [];
        angular.forEach(response.data.groupingsDown.groupings, function (de, di) {
            /*...*/
            });
        });
      data = report02ChartData;
      return data;
    });
}

这样，$http错误也会在控制器的.catch(fuction(err){..})块中发出，因为您没有破坏链。

<强>更新由于.success / .error不可链接并标记为deprecated，因此您应该使用.then / .error。

在Angular中返回延迟解析的对控制器的异步响应

2 个答案: