ホームページ > 記事 > ウェブフロントエンド > Firebase でデータを非同期に取得するときに参照の損失を防ぐにはどうすればよいですか?
Firebase を AngularJS と組み合わせることで、ユーザーのリストを含むデータの効率的な取得が可能になります。 Once() 関数を使用してユーザー リストにアクセスすることは困難ではありませんが、その関数のスコープを超えてユーザー リストを取得することは困難であることがわかります。この記事では、根本的な原因を調査し、包括的な解決策を提供します。
Firebase のデータ取得は非同期で動作し、コードの実行が非線形になります。これを説明するには、次のコード スニペットを考えてみましょう。
this.getUsers = function() { var ref = firebase.database().ref('/users/'); ref.once('value').then(function(snapshot) { // User list processing console.log(users); // Output: All users }); console.log(userList); // Output: Undefined }
実行すると、then() ブロック内での取得が成功したにもかかわらず、最後に期待されるユーザー リスト出力が得られないままになります。これは、コードが順序どおりに実行されないために発生します。
1.コールバックを利用する
直接的なアプローチは、ユーザー リストに依存するすべてのコードをコールバック関数にシフトすることです。これにより、ロジックが「リストをロードしてから印刷する」から「リストがロードされるたびに印刷する」に再構築されます。ref.once('value', function(snapshot) { // User list processing console.log(users); // Output: All users })
2. Promise とコールバックを活用する
Promise はより洗練されたソリューションを提供し、getUsers() 関数から Promise を返すことができます。これにより、以前と同様に Once() コールバックを使用できるようになりますが、追加の Promise ラッピングが追加されています:this.getUsers = function() { return ref.once('value').then(function(snapshot) { // User list processing return users; }) ... userService.getUsers().then(function(userList) { console.log(userList); })
3. Async/Await を採用する
Promise を使用すると、async/await 構文を利用して、より同期的に見えるアプローチを実現できます。async function getAndLogUsers() { const userList = await userService.getUsers(); console.log(userList); }ただし、これは重要です。 getUsers() 関数は非同期関数のままであるため、呼び出し元のコードが Promise または Future をそれに応じて処理する必要があることに注意してください。これらの戦略を採用することで、Firebase の非同期機能を効果的に活用し、それ以降の参照の損失を防ぐことができます。 Once() 関数のスコープ。
以上がFirebase でデータを非同期に取得するときに参照の損失を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。