[解決済み] 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);
});
})();
};
関連
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?