这让我有点抓狂。
预期行为:
我单击一个按钮 > 它触发 checkLoginStatus > 从 firebase 返回 true 或 false > bool 值存储在 isLoggedIn > 即 console.log'd 中
实际结果: 我单击按钮 > 它触发该功能 > 控制台日志显示为未定义/错误 > 然后返回用户对象。
问题:
为什么我的 React 容器方法 isUserAlreadyAuthenticated()
在 await
完成之前注销?
上下文:
我有一组 4 个实用函数。他们每个人都关注 firebase/login 生命周期中的 diff 元素(注册、登录、注销、hasUserAuthenticatedBefore...)
它们都是异步等待函数。因此,例如:这是登录名 - 工作正常:-
export const login = async (email, password) => {
let defaultStatus = false;
try {
await firebase.auth().signInWithEmailAndPassword(email, password)
.then(res => {
// if firebase fires back a user object, then login is true.
if (res.user.email) {
defaultStatus = true;
}
})
.catch(error => {
console.log('Firebase | sign in error: ', error.message);
defaultStatus = false;
});
} catch (err) {
console.log('Login | error: ', err);
}
console.log('login status after logging in Try/Catch is: ', defaultStatus);
return defaultStatus;
}
注意:当我在我的容器中调用这个函数时,它会得到正确的返回 bool 值响应。
现在...如果我查看 checkLoginStatus 函数。任何变化或奇怪而精彩的重写都无法使其以类似的方式运行。
export const checkLoginStatus = async () => {
let defaultStatus = false;
try {
firebase.auth().onAuthStateChanged(user => {
// if user exists then defaultStatus = true;
// if not exists then defaultStatus = false;
})
} catch (err) {
console.log('sign up user error: ', err);
}
console.log('default status after checking login status: ', defaultStatus);
return defaultStatus;
}
然后在我的容器中:-
isUserAlreadyAuthenticated = async () => {
let isLoggedIn = await this.props.checkLoginStatus();
console.log('is foo here? ===>', isLoggedIn); // undefined
}
我尝试过的事情:-
将util函数改成promise(this gets checkLoginStatus is not a function error)
从 isUserAlreadyAuthenticated 中删除异步;像普通函数一样触发它(因为异步部分在 util 函数本身中管理)。没有快乐。
将 onAuthStateChanged() api 更改为 .then()
风格的 promise 。没有变化。
我从 checkLoginStatus
中删除了所有 Firebase 代码 & 只是让它在 setTimeout()
之后返回一个字符串 - 而且它仍然 在用户对象之前返回 undefined已被检索。
我在这里没有看到什么?
最佳答案
感谢@FelixKling 和@Think-Twice。
我确实最终 a) 将 util 函数包装在一个 Promise 中,和阅读异步等待。以为我明白了,但有一些我没有的怪癖。
虽然关键似乎是放入一个递归元素。
实用函数:
export function checkLoginStatus() {
return new Promise((resolve, reject) => {
const unsubscribe = firebase.auth().onAuthStateChanged(user => {
unsubscribe(); // <--- calls itself and resolves with a successful user object or null
resolve(user);
}, reject('api has failed'));
});
}
这会调用自身,直到用户响应是成功的用户对象或返回 null。
然后在 React 方面,我有一个 Async-Await 函数来等待 promise :
isUserAlreadyAuthenticated = async () => {
try {
let user = await this.props.checkLoginStatus();
console.log('react side: ', user);
if (user && user.email) {
this.setState({
isLoggedIn: true, // <-- when true page navs to Homepage
});
}
} catch(err) {
console.log('catch | api error: ', err);
}
}
我希望这对其他正在使用 onAuthStateChanged()
api 的人有所帮助。这不是一个 promise ,它是不可行的。它必须进行回调。
关于javascript - 为什么我的容器组件不能正确接收 Async Await 的结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53105046/