1. ホーム
  2. javascript

[解決済み] AngularJSによるサーバーポーリング

2023-04-29 11:46:02

質問

私はAngularJSを学ぼうとしています。 1秒ごとに新しいデータを取得するための私の最初の試みはうまくいきました。

'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を更新して別のタイムアウトを設定する前にレスポンスを待ちます。 問題は、上記をAngularモジュールとモジュール作成用の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秒間に1つのリクエストを吐き出し、UIをクリアしてしまうようです。私は、コールバック関数を使用する必要があると思います。私は試してみました。

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

を実行しましたが、次のようなエラーが発生しました: "Error: destination.push is not a function" これは $resource のドキュメントに基づいていたのですが、そこにある例をよく理解していませんでした。

どうすれば2番目の方法を使えるようになりますか?

どのように解決するのですか?

を呼び出す必要があります。 tick のコールバックで query .

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

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