การสำรวจเซิร์ฟเวอร์ด้วย AngularJS

ฉันพยายามเรียน AngularJS ความพยายามครั้งแรกของฉันในการรับข้อมูลใหม่ทุกวินาทีได้ผล:

'use strict';

function dataCtrl($scope, $http, $timeout) {
    $scope.data = [];

    (function tick() {
        $http.get('api/changingData').success(function (data) {
            $scope.data = data;
            $timeout(tick, 1000);
        });
    })();
};

เมื่อฉันจำลองเซิร์ฟเวอร์ที่ทำงานช้าโดยพักเธรดเป็นเวลา 5 วินาทีมันจะรอการตอบสนองก่อนที่จะอัปเดต UI และตั้งค่าการหมดเวลาอื่น ปัญหาคือเมื่อฉันเขียนด้านบนใหม่เพื่อใช้โมดูลเชิงมุมและ DI สำหรับการสร้างโมดูล:

'use strict';

angular.module('datacat', ['dataServices']);

angular.module('dataServices', ['ngResource']).
    factory('Data', function ($resource) {
        return $resource('api/changingData', {}, {
            query: { method: 'GET', params: {}, isArray: true }
        });
    });

function dataCtrl($scope, $timeout, Data) {
    $scope.data = [];

    (function tick() {
        $scope.data = Data.query();
        $timeout(tick, 1000);
    })();
};

สิ่งนี้ใช้ได้เฉพาะเมื่อการตอบสนองของเซิร์ฟเวอร์รวดเร็ว หากมีความล่าช้ามันจะส่งสแปม 1 คำขอต่อวินาทีโดยไม่ต้องรอการตอบกลับและดูเหมือนว่าจะล้าง UI ฉันคิดว่าฉันต้องใช้ฟังก์ชันโทรกลับ ฉันเหนื่อย:

var x = Data.get({}, function () { });

แต่ได้รับข้อผิดพลาด: "Error: destination.push ไม่ใช่ฟังก์ชัน" ซึ่งอ้างอิงจากเอกสารสำหรับทรัพยากร $แต่ฉันไม่เข้าใจตัวอย่างที่นั่นจริงๆ

ฉันจะทำให้แนวทางที่สองทำงานได้อย่างไร

คุณควรจะเรียกฟังก์ชั่นในการเรียกกลับสำหรับtickquery

function dataCtrl($scope, $timeout, Data) {
    $scope.data = [];

    (function tick() {
        $scope.data = Data.query(function(){
            $timeout(tick, 1000);
        });
    })();
};

Angular เวอร์ชันล่าสุดได้เปิดตัว$ intervalซึ่งทำงานได้ดีกว่า$ timeoutสำหรับการสำรวจเซิร์ฟเวอร์

var refreshData = function() {
    // Assign to scope within callback to avoid data flickering on screen
    Data.query({ someField: $scope.fieldValue }, function(dataElements){
        $scope.data = dataElements;
    });
};

var promise = $interval(refreshData, 1000);

// Cancel interval on page changes
$scope.$on('$destroy', function(){
    if (angular.isDefined(promise)) {
        $interval.cancel(promise);
        promise = undefined;
    }
});

นี่คือเวอร์ชันของฉันที่ใช้การสำรวจซ้ำ ซึ่งหมายความว่าจะรอการตอบสนองของเซิร์ฟเวอร์ก่อนที่จะเริ่มการหมดเวลาถัดไป นอกจากนี้เมื่อเกิดข้อผิดพลาดก็จะทำการสำรวจต่อไป แต่จะอยู่ในคฤหาสน์ที่ผ่อนคลายมากขึ้นและตามระยะเวลาของข้อผิดพลาด

สาธิตอยู่ที่นี่

เขียนเพิ่มเติมเกี่ยวกับเรื่องนี้ที่นี่

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

app.controller('MainCtrl', function($scope, $http, $timeout) {

    var loadTime = 1000, //Load the data every second
        errorCount = 0, //Counter for the server errors
        loadPromise; //Pointer to the promise created by the Angular $timout service

    var getData = function() {
        $http.get('http://httpbin.org/delay/1?now=' + Date.now())

        .then(function(res) {
             $scope.data = res.data.args;

              errorCount = 0;
              nextLoad();
        })

        .catch(function(res) {
             $scope.data = 'Server error';
             nextLoad(++errorCount * 2 * loadTime);
        });
    };

     var cancelNextLoad = function() {
         $timeout.cancel(loadPromise);
     };

    var nextLoad = function(mill) {
        mill = mill || loadTime;

        //Always make sure the last timeout is cleared before starting a new one
        cancelNextLoad();
        $timeout(getData, mill);
    };


    //Start polling the data from the server
    getData();


        //Always clear the timeout when the view is destroyed, otherwise it will   keep polling
        $scope.$on('$destroy', function() {
            cancelNextLoad();
        });

        $scope.data = 'Loading...';
   });

เราสามารถทำการสำรวจได้อย่างง่ายดายโดยใช้บริการ $ interval นี่คือเอกสารรายละเอียดเกี่ยวกับ $ interval
https://docs.angularjs.org/api/ng/service/$interval
ปัญหาในการใช้ $ interval คือถ้าคุณกำลังทำการเรียกใช้บริการ $ http หรือการโต้ตอบกับเซิร์ฟเวอร์และหากล่าช้ามากกว่า $ interval time จากนั้นก่อนที่คำขอหนึ่งของคุณจะเสร็จสมบูรณ์คำขอจะเริ่มต้นอีกครั้ง
วิธีแก้ไข:
1. การโพลควรเป็นสถานะง่ายๆที่ได้รับจากเซิร์ฟเวอร์เช่น json บิตเดียวหรือเบาดังนั้นไม่ควรใช้เวลานานกว่านั้นตามช่วงเวลาที่คุณกำหนด คุณควรกำหนดช่วงเวลาให้เหมาะสมเพื่อหลีกเลี่ยงปัญหานี้
2. ยังคงเกิดขึ้นเนื่องจากเหตุผลใดก็ตามคุณควรตรวจสอบการตั้งค่าสถานะส่วนกลางว่าคำขอก่อนหน้านี้เสร็จสิ้นหรือไม่ก่อนที่จะส่งคำขออื่น ๆ จะพลาดช่วงเวลาดังกล่าว แต่จะไม่ส่งคำขอก่อนเวลาอันควร
นอกจากนี้หากคุณต้องการตั้งค่า threshold ซึ่งหลังจากค่าใดค่าหนึ่งแล้วควรตั้งค่าการสำรวจความคิดเห็นคุณสามารถทำได้ดังต่อไปนี้
นี่คือตัวอย่างการทำงาน อธิบายรายละเอียดที่นี่

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;
    }
}]);