Question

我正在使用服务工作者缓存我的ajax请求。因此，对于页面的初始内容加载，我正在进行两次异步调用以获取数据：一个用于缓存，一个用于网络。有一个通用的更新功能，它通过检查时间戳来更新视图。但是，我收到了未定义的响应，用于缓存响应的对象属性时间戳。但是，它是明确定义的，可以在我检查控制台时进行验证。这会导致时间戳检查结果为false，并且视图不会更新。

这是我的代码：

if(angular.isUndefined($scope.userStamp))
{
   $scope.userStamp = 0;
}

if(response.timestamp > $scope.userStamp)
{       
console.log('Update user done');
console.log(source);
console.log(response.timestamp);
console.log($scope.userStamp);
console.log(response);
$scope.user_id=response.user_id;
$scope.username=response.username;
$scope.firstname=response.firstname;            
$scope.lastname=response.lastname;
$scope.email=response.email;
$scope.mobile=response.mobile;
$scope.userStamp = response.timestamp;
}
else
{
console.log('Update user not done');
console.log(source);
console.log(response.timestamp);//returns undefined
console.log($scope.userStamp);
console.log(response);//clearly exists here         
}

**类似的问题可以在这里找到： Can't access object property, even though it exists. Returns undefined。但答案只涉及console.log的工作。它对我的代码工作没有帮助

Screenshot of the console: 这是整个代码：

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

app.controller('myCtrl', function($scope,$http,$q) {

$scope.updateUser = function(response,source) {
        if(angular.isUndefined($scope.userStamp))
        {
            $scope.userStamp = 0;           
        }
        if(response.timestamp > $scope.userStamp)
        {       
        console.log('Update user done');
        console.log(source);
        console.log(response.timestamp);
        console.log($scope.userStamp);
        console.log(response);
        $scope.user_id=response.user_id;
        $scope.username=response.username;
        $scope.firstname=response.firstname;            
        $scope.lastname=response.lastname;
        $scope.email=response.email;
        $scope.mobile=response.mobile;
        $scope.userStamp = response.timestamp;
        }
        else
        {
        console.log('Update user not done');
        console.log(source);
        console.log(response.timestamp);
        console.log($scope.userStamp);
        console.log(response);          
        }
    }

$scope.getUserNetwork = function(){
    var q = $q.defer(); 

    $http({
        url: '/getData/getUser.php',
        method: "POST"
    })
    .then(function(response) {
        if(response.data.valid)
        {
            $scope.updateUser(response.data,"network");
            console.log('User network complete');
            q.resolve('User network complete');
        }
        else
        {
            console.log('User network not complete');
            console.log(response);
            q.resolve('User network not complete');
        }

    }, 
    function(response) { 
        console.log('User network not complete');
        q.reject('User network not complete');
    }); 
    return q.promise;   
}   

$scope.getUserLocal = function() {  
    var q = $q.defer();

    getLocalData('/getData/getUser.php').then(
    function(data)
    {
        if(data.msg=="success")
        {
            console.log('Get local user success!');
            console.log(data);
            $scope.updateUser(data.cachedata,"local");
            q.resolve('User network complete');         
        }
        else
        {
            q.resolve('User network complete');
        }           
    },
    function(msg)
    {
        console.log('Get local user falied!');
        console.log(msg);
        q.reject('User local not complete');
    }
    );

    return q.promise;
    }

$scope.updateProducts = function(response,source)
    {
        if(angular.isUndefined($scope.productsStamp))
        {
            $scope.productsStamp = 0;           
        }
        if(response.timestamp > $scope.productsStamp)
        {       
        console.log('Update products done');
        console.log(source);
        console.log(response.timestamp);
        console.log($scope.productsStamp);
        console.log(response);
        $scope.products=response.products;      
        $scope.productsStamp = response.timestamp;      
        }
        else
        {
        console.log('Update products not done');
        console.log(source);
        console.log(response.timestamp);
        console.log($scope.productsStamp);
        console.log(response);          
        }
    }   

$scope.getProductsNetwork = function() {
    var q = $q.defer(); 
    $http({
        url: '/getData/getProducts.php',
        method: "POST",
        data: {"user_id":$scope.user_id}
    })
    .then(function(response) {
        if(response.data.valid)
        {
            console.log('Products network complete');
            console.log(response.data.products);
            $scope.updateProducts(response.data,"network");
            q.resolve('Products network complete');
        }
        else
        {
            console.log('Products network not complete');
            console.log(response);
            q.reject('Products network not complete');
        }
    }, 
    function(response) {
        console.log('Products network not complete');   
        console.log(response);      
        q.reject('Products network not complete');
    });
    return q.promise;               
    }

$scope.getProductsLocal = function() {
    var q = $q.defer();
    getLocalData('/getData/getProducts.php').then(  
    function(data)
    {
        if(data.msg=="success")
        {
            console.log('Get local product success!');
            console.log(data);
            $scope.updateProducts(data.cachedata,"local");
            q.resolve('Products local complete');           
        }
        else
        {
            q.resolve('Products local complete');
        }
    },
    function(msg)
    {
        console.log('Get local product falied!');
        console.log(msg);
        q.reject('Products local not complete');
    }   
    );
    return q.promise;
    }

    angular.element(document).ready(function () {
        $scope.getUserLocal().then(function(msg){$scope.getProductsLocal().then(function(msg){$scope.getUserNetwork().then(function(msg){$scope.getProductsNetwork();
        });
        });
        });     
    }); 

});   

function getLocalData(url)
{
     return new Promise(function(resolve, reject) {
     if ('caches' in window)
     {
      base_url="https://milk-test.000webhostapp.com";
      caches.match(base_url+url).then(function(response) {
        if (response) {
            console.log('Local data found');
            resolve({msg:'success',cachedata:response.json()});
        }
        else
        {
            console.log('Local data not found');
            resolve({msg:'fail'});
        }
      },
      function(msg)
      {
          console.log(msg);
          reject('getLocalData Failed');
      }
      );
    }
     });
}

Answer 1

我解决了这个问题。问题出在json（）函数上。我在这里找到了解决方案：

Why does .json() return a promise if in an object literal?

不是在resolve调用中调用json（），而是按原样传递响应对象，然后在链中的下一个函数中调用json（）。

        data.cachedata.json().then(
        function(data)
        {
            $scope.updateUser(data,"local");
        },
        function(msg)
        {
            console.log(msg);
        }
        );

Angularjs- Object属性未定义，即使它存在

1 个答案: