Firebase でデータを非同期に取得するときに参照の損失を防ぐにはどうすればよいですか?

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. 「リスナーをアタッチする前に」ログを作成
2. リスナーをアタッチしてユーザー データを取得します
3. ログを「リスナーをアタッチした後」
4. 🎜>
リスナーの完了時に、「取得した値」をログに記録し、ユーザー リストを処理します
5. userList がまだ割り当てられていないため、「未定義」をログに記録します

ユーザーリスト

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 サイトの他の関連記事を参照してください。