私は、API を呼び出して大量のデータを返す AngularJS アプリを使用しており、ユーザーはそのデータをタグでフィルタリングして、結果の粒度を高めることができます。タグをクリックしてデータをフィルタリングするたびに、アプリが新しい$http.get()
呼び出しを行い、ユーザーがパーマリンクを保存して特定のデータ セットに戻ることができるように、URL が適切なクエリ パラメーターで変更されます。
を使用してアプリに適切な履歴処理を与え、window.history.pushState()
各履歴オブジェクトに関連するクエリ パラメーターを状態データとして渡すようにしています。window.onpopstate
戻る/進むボタンがクリックされたことを検出するために使用し、それを使用して、履歴から関連する状態データを使用して新しい呼び出し$http.get()
を行います。
何らかの理由で、この関数は 1秒$http.get()
ごとにのみ起動し、その後 2 つの呼び出しを行います。キャッシングが行われているようですが、原因を見つけることができませんでした。この動作は、後方と前方の両方向に持続し、一貫して毎秒のイベントです。タグが追加/削除されるたびに が 1 だけ増加すること、状態データが正常に送信されていること、新しい検索クエリが正しく組み立てられていること、および要求パスが正しいことを確認しました。発砲していないだけです。どうしたの?? popstate
window.history.length
説明のために、動作フローは次のようになります。
- ページを読み込む
/default
- 最初のタグを追加: URL は
/default&tags=a
で、$http.get()
新しいデータを返します - 2 番目のタグを追加: URL is
/default&tags=a,b
、$http.get()
新しいデータを返す - 3 番目のタグを追加: URL is
/default&tags=a,b,c
、$http.get()
新しいデータを返す - 4 番目のタグを追加: URL is
/default&tags=a,b,c,d
、$http.get()
新しいデータを返す
- 最初のタグを追加: URL は
- 最初の戻るボタン イベント
window.onpopstate
火災、URLは現在/default&tags=a,b,c
- ネットワークの変更なし
- 2 回目の戻るボタン イベント
window.onpopstate
火災、URLは現在/default&tags=a,b
$http.get()
起動し、データのネットワーク要求を送信します/default&tags=a,b,c
$http.get()
再び起動し、データのネットワーク要求を送信します/default&tags=a,b
/default&tags=a,b
負荷のデータセット
- 3 回目の戻るボタン イベント
window.onpopstate
火災、URLは現在/default&tags=a
- ネットワークの変更なし
- 4 回目の戻るボタン イベント
window.onpopstate
火災、URLは現在/default
$http.get()
起動し、データのネットワーク要求を送信します/default&tags=a
$http.get()
再び起動し、データのネットワーク要求を送信します/default
/default
負荷のデータセット
関連するコード スニペット:
$scope.apiRequest = function(options, callback) {
// Omitted: a bunch of functions to build query
// based on user-selected tags.
// I've verified that this is working correctly.
$http.get(path)
.then(function(response) {
console.log('http request submitted');
if (callback) {
callback(response.data.response, response.data.count, response.data.facets);
console.log('data returned');
}
}, function(response) {
console.log('there has been an error');
});
}
成功イベントもエラー イベントも発生しません。$http.get().then().catch()
他に何か起こっている可能性があるかどうかを確認するために使用しようとしましたが、何らかの理由...catch()
で、それは有効な関数ではないというエラーがコンソールに表示され続け、それ自体が当惑しています。何か案は?
ありがとう!