使用 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() 回調，但帶有額外的承諾包裝：

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中文網其他相關文章！