Server polling with AngularJS

后端 未结 4 1721
抹茶落季
抹茶落季 2020-12-04 05:08

I\'m trying to learn AngularJS. My first attempt to get new data every second worked:

\'use strict\';

function dataCtrl($scope, $http, $timeout) {
    $sco         


        
4条回答
  •  南笙
    南笙 (楼主)
    2020-12-04 05:56

    We can do it polling easily using $interval service. here is detail document about $interval
    https://docs.angularjs.org/api/ng/service/$interval
    Problem using $interval is that if you are doing $http service calling or server interaction and if delayed more than $interval time then before your one request completes, it starts another request.
    Solution:
    1. Polling should be simple status getting from server like a single bit or lightweight json so should not take longer then your defined interval time. You should also define time of interval appropriately to avoid this issue.
    2. Somehow it is still happening due any reason, you should check a global flag that previous request finished or not before sending any other requests. It will miss that time interval but it won't send request prematurely.
    Also if you wanted to set threshold value that after some value anyhow polling should be set then you can do it following way.
    Here is working example. explained in detail here

    angular.module('myApp.view2', ['ngRoute'])
    .controller('View2Ctrl', ['$scope', '$timeout', '$interval', '$http', function ($scope, $timeout, $interval, $http) {
        $scope.title = "Test Title";
    
        $scope.data = [];
    
        var hasvaluereturnd = true; // Flag to check 
        var thresholdvalue = 20; // interval threshold value
    
        function poll(interval, callback) {
            return $interval(function () {
                if (hasvaluereturnd) {  //check flag before start new call
                    callback(hasvaluereturnd);
                }
                thresholdvalue = thresholdvalue - 1;  //Decrease threshold value 
                if (thresholdvalue == 0) {
                    $scope.stopPoll(); // Stop $interval if it reaches to threshold
                }
            }, interval)
        }
    
        var pollpromise = poll(1000, function () {
            hasvaluereturnd = false;
            //$timeout(function () {  // You can test scenario where server takes more time then interval
            $http.get('http://httpbin.org/get?timeoutKey=timeoutValue').then(
                function (data) {
                    hasvaluereturnd = true;  // set Flag to true to start new call
                    $scope.data = data;
    
                },
                function (e) {
                    hasvaluereturnd = true; // set Flag to true to start new call
                    //You can set false also as per your requirement in case of error
                }
            );
            //}, 2000); 
        });
    
        // stop interval.
        $scope.stopPoll = function () {
            $interval.cancel(pollpromise);
            thresholdvalue = 0;     //reset all flags. 
            hasvaluereturnd = true;
        }
    }]);
    

提交回复
热议问题