👀 Views: 87 💬 Answers: 1 📅 Created: 2025-06-12

angularjs service timeout promise JavaScript

I need help solving I tried several approaches but none seem to work... I'm working with AngularJS 1.8 and I'm encountering a problem where a service is supposed to return data after a timeout, but I always end up with `undefined` in my controller. I have a service that fetches some data asynchronously, and I’m using `$timeout` to simulate a delay. Here’s a simplified version of what I’m trying to do: ```javascript angular.module('myApp', []) .service('DataService', function($timeout) { this.getData = function() { let data; $timeout(function() { data = { message: 'Hello, World!' }; }, 2000); return data; }; }) .controller('MainController', function($scope, DataService) { $scope.loadData = function() { $scope.data = DataService.getData(); console.log($scope.data); // This logs undefined }; }); ``` When I call `$scope.loadData()`, I see that `console.log($scope.data)` outputs `undefined`. It seems like the `$timeout` function is not updating `data` in time before the function exits. I tried changing the service method to return a promise, but I'm not sure how to handle it properly in the controller. This is my attempt: ```javascript angular.module('myApp', []) .service('DataService', function($timeout, $q) { this.getData = function() { let deferred = $q.defer(); $timeout(function() { deferred.resolve({ message: 'Hello, World!' }); }, 2000); return deferred.promise; }; }) .controller('MainController', function($scope, DataService) { $scope.loadData = function() { DataService.getData().then(function(data) { $scope.data = data; console.log($scope.data); // This works as expected }); }; }); ``` In this version, `console.log($scope.data)` within the `.then` block correctly logs the expected object after 2 seconds. However, I feel like I’m overcomplicating things by using promises, especially since I only need a simple timeout. Is there a better approach I can take for handling this, or should I stick with the promise pattern? Any best practices or recommendations would be greatly appreciated! For context: I'm using Javascript on macOS. Thanks in advance!