내 Firebase 참조가 'once()' 함수 외부에서 정의되지 않은 이유는 무엇입니까?-JS 튜토리얼-php.cn

내 Firebase 참조가 'once()' 함수 외부에서 정의되지 않은 이유는 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-07 02:54:03

원래의

554명이 탐색했습니다.

Why Does My Firebase Reference Become Undefined Outside the `once()` Function?

Firebase가 Once() 함수 외부에서 참조를 잃는 이유는 무엇입니까?

Firebase는 비동기식 처리를 활용합니다. 즉, 데이터베이스에서 데이터를 검색하는 것은 순차적으로 실행됩니다. 결과적으로 userService.getUsers 함수에 리스너를 연결한 후 즉시 사용자 목록에 액세스하려고 하면 원하는 결과가 나오지 않습니다.

제공된 코드 조각:

.service('userService', [function() {
    this.getUsers = function() {
        var users;
        var userList;
        var ref = firebase.database().ref('/users/');
        ref.once('value').then(function(snapshot) {
            users = snapshot.val();
            for(var key in users) {
                users[key].id = key;
                // do some other stuff
            }
            console.log(users); // outputs all users
        }).then(function(){
            userList = users; 
            console.log(userList); // outputs all users
        },(function(error){
            alert('error:  ' + error);
        });
        console.log(userList); // outputs 'undefined'
    }
}]);

로그인 후 복사

이를 보여줍니다. 비동기식 동작. 콘솔 출력은 다음과 같습니다.

before attaching listener
after attaching listener
got value

로그인 후 복사

이 문제를 해결하려면 다음 세 가지 옵션이 있습니다.

1. 콜백에서 사용자 목록 사용:

사용자 목록에서 작동하는 모든 필수 코드를 콜백으로 이동:

ref.once('value', function(snapshot) {
        users = snapshot.val();
        for(var key in users) {
            users[key].id = key;
        }
        console.log(users); // outputs all users
    })

로그인 후 복사

2. Promise 반환:

userService.getUsers에서 Promise를 반환하고 후속 작업을 여기에 연결합니다.

this.getUsers = function() {
    var ref = firebase.database().ref('/users/');
    return ref.once('value').then(function(snapshot) {
        users = snapshot.val();
        for(var key in users) {
            users[key].id = key;
            // do some other stuff
        }
        return(users);
    }).catch(function(error){
        alert('error:  ' + error);
    });
}

로그인 후 복사

그런 다음 Promise를 사용하여 데이터가 로드된 후 처리를 계속할 수 있습니다. :

userService.getUsers().then(function(userList) {
    console.log(userList);
})

로그인 후 복사

3. Async 및 Await 사용(ES2017 지원 필요):

getUsers 함수를 async로 표시하고 wait 키워드를 사용하여 Promise가 해결될 때까지 실행을 일시 중지합니다.

this.getUsers = async function() {
    var ref = firebase.database().ref('/users/');
    const snapshot = await ref.once('value');
    const users = snapshot.val();
    for(var key in users) {
        users[key].id = key;
        // do some other stuff
    }
    return users;
}

로그인 후 복사

다음을 수행할 수 있습니다. 이제 다음과 같은 기능을 사용해 보세요.

async function getAndLogUsers() {
    const userList = await userService.getUsers();
    console.log(userList);
}

로그인 후 복사

Firebase의 비동기 실행을 이해하면 데이터베이스의 데이터에 효과적으로 액세스하고 정의되지 않은 잠재적인 참조를 방지할 수 있습니다.

위 내용은 내 Firebase 참조가 'once()' 함수 외부에서 정의되지 않은 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!