Asynchronous request to server with progress/notify - angularjs

Question

I am having problem with setting up a service that will perform asynchronous http request.
Background
I have a backend endpoint /cars.json When you hit this endpoint for the first time the background job which will fetch all the cars information gets started. Server then returns response with status 200:
{"status":"started", "percentage_completion":0, "data":null, "error":null}
Consecutive requests to this endpoint will keep on returning status 200 with updated percentage_completion
{"status":"started", "percentage_completion":45, "data":null, "error":null}
{"status":"started", "percentage_completion":90, "data":null, "error":null}
Finally the request to the endpoint will return:
{"status":"finished", "percentage_completion":100, "data": {...}, "error":null}
and happy days I have a data and I can add it to the $scope.
But I am having hard time to get my head around the promises and angular way of doing things...
I have spiked something like this:
var dashboard = angular.module('dashboard', [
'templates'
]);
dashboard.controller('dashboardController', ['carsService', '$scope',
function(carsService, $scope){
$scope.test = "Loading...";
carsService.get()
.then(function(response){
$scope.test = response.data;
});
}]
);
dashboard.factory('carsService', ['$http', function($http){
var get = function(){
return $http.get('/cars.json');
};
return {
get: get
};
}]);
It sends a single request to the server and updates the test on the scope with the first response stating the job has been started. When I refresh the page after few seconds I get the test updated with a correct data and the finish status.
What would be a best way, angular way:) with promises and stuff to have the service and controller do it automatically.
First thing that comes to my head is to use a $interval or something similar and periodically resend the request from .then(success) but maybe there is a better way.
Angular documentation says something about progress/notify promise but at the moment I have no idea how to wire it in.
Obviously I don't fully understand the promises at the moment, I just got introduced to them - can you share some tips/resources on how to deal with asynchronous requests using angular?

Answer 1

I am not positive that I understand your question fully, but if you are wanting to get the progress updates as they come back, Angular has a progress callback built into their promise service (as you mention). The first callback inside your .then() is your success callback, the second is your error callback, and the third would be your progress callback.
So when chaining your callbacks onto the promise, you can use the following syntax to update a progress indicator:
carsService.get()
.then(function(response){
// success
$scope.test = response.data;
$scope.$apply(); // or wrapped in $timeout
}, function(error){
// error
}, function(percentComplete){
// progress
$scope.progress = percentComplete;
$scope.$apply(); // or wrapped in $timeout
});
As to the best syntax to use when writing and chaining your promises, John Papa has a fantastic (and very in-depth) style guide that will help you better organize your Angular code. You can find this here.
Here's a sample jsfiddle demonstrating this notify/progress callback in action, as well. It is using a timeout to simulate the async call, but displays the general idea well.
Also remember that when you make these async calls, you may need to run $scope.$apply() or wrap the code in the callback where you update your scope data inside of a $timeout(function(){ //update data }); in order to run the Angular digest cycle again (async calls update your data outside of Angular's built-in watchers). This will then cause your view to update, as well, without having to reload a page. There are quite a few blog posts and SO questions regarding this that you can use if you've never run into this behavior before. Here's one that covers it pretty well.

Answer 2

I guess you can use nested promise to achieve progress notify:
function get(){
var defer = $q.defer();
(function fetchData(){
$http.get('/cars.json').then(function(result){
if(result.status === 'started'){
fetchData();
defer.notify(result);
}else if(result.status === 'finished'){
defer.resolve(result);
}
}, function(err){
defer.reject(err);
})
})()
return defer.promise;
}
when you call get(), it first call fetchData to request data from server. When fetchData resolved, check result.status, if status is not finished, call fetchData again and notify outter defer, otherwise, resolve outter defer with final result
//in controller
carService.get().then(
function(finalData){ $scope.test = finalData },
function(err){ ... },
function(notifyData){ $scope.test = notifyData }
}

Answer 3

All the credit goes to MarkoCen for his suggestion on using chained promises. This is my final solution:
app.js.coffee
angular
.module 'dashboard', ['templates']
car_service.coffee
CarService = ($q, $http)->
get = (url,defer)->
$http.get(url).then(
(result)->
data = result.data
if data.status == "started"
get(url, defer)
defer.notify(data.percentage_completion)
else
defer.resolve(data.data.cars)
)
defer.promise
return{
getAll: (url)->
defer = $q.defer()
get(url,defer)
}
angular
.module 'dashboard'
.factory 'CarService', [
'$q'
'$http'
CarService
]
cars_controller.coffee
DashboardController = (CarService) ->
vm = #
vm.campaigns = []
vm.statusBar = {}
CarService.getAll('/cars.json').then(
(data)->
vm.campaigns = data
(reason)->
console.log reason
(update)->
vm.statusBar.percentage = update
)
return
angular
.module 'dashboard'
.controller 'DashboardController', [
'CarService'
DashboardController
]

Answer 4

Here there is a reference about $http service in AngularJS.
https://docs.angularjs.org/api/ng/service/$http
This is the explanation about the $http service and how to use then()
function.
// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
The best way is using HTML5 Server-Sent Events or WebSockets technology where you can get data in realtime.
In this demo I'm using anonymous function inside the then() function.
I've made two very simple demos by using PHP, Server Sent Events, JSON and AngularJS Factory service.
AngularJS Factory Service and PHP JSON Response: cars.php
<?php
header("Access-Control-Allow-origin: *"); // To allow cross-origin HTTP request.
header("Content-Type: application/json"); // JSON response.
header("Cache-Control: no-cache"); // No cache.
/*
Only to display random numeric values.
In a real scenario the data can be obtained from database.
*/
$min = 0;
$max = 100;
$count = rand($min, $max); // Get a random numeric value.
$status = "started";
if($count == $max)
{
$status = "finished"; // If the $count == 100 then finished.
}
// Builing an array with current data.
$array = array("status" => $status, "percentage_completion" => $count, "data" => null, "error" => null);
echo json_encode($array); // Encode the array to the json representation.
?>
(function() {
var dashboard = angular.module("dashboard", []);
dashboard.controller("dashboardController", ["carsService", "$scope",
function(carsService, $scope) {
$scope.statusJSON = "Loading...";
$scope.testJSON = {};
$scope.initJSON = function() {
(function loop() { // Looping function to continous request.
carsService.get().then(function(response) { // Angular promise by using then() function.
$scope.testJSON = response.data;
$scope.statusJSON = $scope.testJSON.status;
console.log($scope.testJSON);
}, function(response) {
console.log("Error: " + response.status);
});
setTimeout(loop, 1000); // Call the $http service every 1 second.
})();
};
}
]);
dashboard.factory("carsService", ["$http",
function($http) {
return { // This factory service returns an object with the get function.
get: function() {
return $http.get("http://dfjb.webcindario.com/cars.php", {
responseType: "json"
}); // Returns a $http service.
}
};
}
]);
})();
.json {
border: solid 1px #444444;
margin: 5px;
padding: 5px;
}
<html data-ng-app="dashboard">
<head>
<title>Demo AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body data-ng-controller="dashboardController">
<div class="json" data-ng-init="initJSON()">
<h3>Demo With Angular $http Service</h3>
<div data-ng-bind="statusJSON"></div>
percentage_completion: {{testJSON.percentage_completion}}
<br />
<progress min="0" max="100" value="{{testJSON.percentage_completion}}" />
</div>
</body>
</html>
HTML5 Server-Sent Events: data.php
<?php
header("Access-Control-Allow-origin: *"); // To allow cross-origin HTTP request.
header("Content-Type: text/event-stream"); // To send event streams.
header("Cache-Control: no-cache"); // No cache.
/*
Only to display random numeric values.
In a real scenario the data can be obtained from database.
*/
$min = 0;
$max = 100;
$count = rand($min, $max); // Get a random numeric value.
$status = "started";
if($count == $max)
{
$status = "finished"; // If the $count == 100 then finished.
}
// Builing an array with current data.
$array = array("status" => $status, "percentage_completion" => $count, "data" => null, "error" => null);
echo "data: ". json_encode($array) ."\n\n"; // Encode the array to the json representation. The event-stream always start with "data: ".
flush(); // Flush the output data back to the web page.
?>
(function() {
var dashboard = angular.module("dashboard", []);
dashboard.controller("dashboardController", ["carsService", "$scope",
function(carsService, $scope) {
$scope.statusSSE = "Loading...";
$scope.testSSE = {};
$scope.initSSE = function() {
// Check if EventSource is supported by the browser.
if (typeof(EventSource) !== "undefined") {
carsService.getDataSSE().onmessage = function() {
// The factory service has a function that returns an EventSource object, so this can be accessed in the controller.
$scope.testSSE = JSON.parse(event.data); // Parse the string in an object.
$scope.statusSSE = $scope.testSSE.status;
$scope.$apply(); // Update the $scope variable so can be used in the view.
console.log($scope.testSSE);
};
} else {
alert("SSE not supported by browser.");
}
};
}
]);
dashboard.factory("carsService", [
function() {
return {
getDataSSE: function() {
// HTML5 Server-Sent Events Implementation.
return new EventSource("http://dfjb.webcindario.com/data.php"); // Returns the EventSource object.
}
};
}
]);
})();
.sse {
border: solid 1px #FF44AA;
margin: 5px;
padding: 5px;
}
<html data-ng-app="dashboard">
<head>
<title>Demo AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body data-ng-controller="dashboardController">
<div class="sse" data-ng-init="initSSE()">
<h3>Demo With HTML5 Server-Sent Events in PHP</h3>
<div data-ng-bind="statusSSE"></div>
percentage_completion: {{testSSE.percentage_completion}}
<br />
<progress min="0" max="100" value="{{testSSE.percentage_completion}}" />
</div>
</body>
</html>
Finally, in this demo, I'm showing you how to use realtime notifications from server by using AngularJS Factory service in PHP and HTML5 Server-Sent Events Technology with json response.
If you check the console you get a json string in the EventStream tab automatically.