【问题标题】:AngularJS promise undefinedAngularJS 承诺未定义
【发布时间】:2017-06-28 11:58:21
【问题描述】:

我已经阅读了网络上的几个示例和 SO 上的问题,但我仍然缺少一些东西。

我有一项服务可以从我的 API 中获取订单数据。我想解决服务内部的承诺。服务内的 console.log 记录了正确的数据。

但是,在我的控制器中,我得到 "TypeError: Cannot read property 'then' of undefined"

我以为控制器函数会等待数据解析?

服务

angular.module('app')
.factory('orderService', function($http) {

    // DECLARATIONS
    var baseUrl = 'http://api.example.com/';
    var method = 'GET';
    var orderData = null;

    return {
        getOrderData: getOrderData
    };

    // IMPLEMENTATIONS
    function getOrderData(ordernumber) {        
        // order data does not yet exist in service
        if(!orderData) {
            dataPromise = $http({
                url: baseUrl + 'order/' + ordernumber,
                method: method,
                withCredentials: true,
                headers: {
                    'Content-Type': 'application/json'
                }
            // success
            }).then(function(response) {
                orderData = response.data;
                console.log('Received data: ' + JSON.stringify(response.data));
                return orderData;               
            },
            // faliure
            function(error) {
                  console.log("The request failed: " + error);
            });
        // order data exist in service
        } else {
            console.log('Data present in service: ' + orderData);
            return orderData;
        }
    } // end: getOrderData function
}); // end: customerService

控制器

app.controller('orderController', function($scope, $stateParams, orderService) {

   $scope.ordernumber = $stateParams.order;

   orderService.getOrderData($scope.ordernumber)
    // success 
    .then(function(response) {
        $scope.order = response;
        console.log('Controller response: ' + response);
    },
    // faliure
    function(error) {
      console.log("The request failed: " + error);
    });
});

【问题讨论】:

  • 所以您正在尝试缓存请求的响应。但是您只缓存一个结果。如果ordernumber 发生变化,您仍会返回旧ordernumber 的结果。结果的有效期是多久?您没有使代码中的缓存数据无效的概念。这里的整个缓存概念都被打破了;你应该重新考虑一下。在此之前,您可以将您的功能简化为function getOrderData(ordernumber) { return $http(...).then(response => response.data) }。这不会缓存,但会返回正确的结果
  • 是的,甚至在我发布代码之前我就已经想到了。订单号会改变。感谢您的输入!我会去掉它,因为现在传输的数据量太少了,我实际上不需要它

标签: javascript angularjs angular-promise


【解决方案1】:

你的函数 getOrderData 没有返回一个承诺

function getOrderData(ordernumber) {        
   var deferred = $q.defer();
        // order data does not yet exist in service
        if(!orderData) {
            dataPromise = $http({
                url: baseUrl + 'order/' + ordernumber,
                method: method,
                withCredentials: true,
                headers: {
                    'Content-Type': 'application/json'
                }
            // success
            }).then(function(response) {
                orderData = response.data;
                console.log('Received data: ' + 
                 JSON.stringify(response.data));
                deferred.resolve(orderData);               
            },
            // faliure
            function(error) {
              deferred.reject(error);
                  console.log("The request failed: " + error);
            });
        // order data exist in service
        } else {
            console.log('Data present in service: ' + orderData);
            deferred.resolve(orderData);
        }
    else {
     deferred.reject('Not set!');
   }

return deferred.promise;
    } // end: getOrderData function

【讨论】:

  • 太棒了!感谢您的帮助。我要通读一下$q。您的 deferred.reject 的 else 语句缺少开头 if。我删除了其他只是为了尝试一下,一切正常。你介意编辑你的代码吗?再次感谢!
  • 我已经把那些 else 声明,因为如果你的 if 声明中的条件不知何故 false 承诺将永远是开放的,你不会得到任何错误或成功控制器
  • 避免使用延迟反模式。您可以将代码结构简化为function getOrderData(ordernumber) { if(!orderData) orderData = $http(...).then(response => response.data); return orderData; },但这个问题中的整个缓存概念(不是您的代码特别是)坏了。
  • 我知道最好只返回$http 这样做的原因是他在调用$http 之前有一些逻辑
  • 但是请求之前的整个逻辑可以覆盖为if(!cachedPromise) cachedPromise = ...; return cachedPromise。而$http 为您提供了缓存的承诺。因此,您无需为此创建任何承诺。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-03-17
  • 1970-01-01
  • 1970-01-01
  • 2015-11-19
  • 2017-01-19
  • 2016-12-10
  • 2015-09-27
相关资源
最近更新 更多