如何在AsyncStorage和Json.parse中实现Javascript async/await/promise

Question

大家好，这是我的脏代码。

const parseJson = async value => {
try{
const parsedData = await JSON.parse(value);
console.log('2', parsedData);
return parsedData;
}catch(e){}
}
const getAuthStateData = async () => {
try{
const storedAuthData = await AsyncStorage.getItem('authState');
console.log('1', storedAuthData);
return storedAuthData != null ? parseJson(storedAuthData) : null;
}catch(e){}
}
useEffect(() => {
const authStateData = getAuthStateData();
console.log('3', authStateData);
}, [])

预期控制台状态顺序为

1, 2, 3

实际控制台状态顺序为

3, 1, 2

authState的数据太多。因此，从Asyncstorage获取它(如果您不熟悉它，可以假设它类似于localstorage(需要一些时间，并且将它解析为json也需要500ms。所以我需要等他们。这是javascript概念的基础：异步、同步、承诺。请帮帮我，学长们！

Answer 1

您的useEffect回调中没有await调用getAuthStateData，因此它异步运行，回调的其余部分保持同步运行，直到运行时有时间运行您给它的其他任务。

我想你应该写这个：

useEffect(async () => {
const authStateData = await getAuthStateData();
console.log('3', authStateData);
}, []);

Answer 2

主要问题是getAuthStateData()之前缺少await，但也缺少一些依赖项和清理。参见内联评论：

const parseJson = (value) => { //not async -- see next comment
try{
const parsedData = JSON.parse(value); //JSON.parse is not an async method, so there's no reason to await here
console.log('2', parsedData);
return parsedData;
}catch(e){
console.error(e);
}
}
const _getAuthStateData = async () => {
try{
const storedAuthData = await AsyncStorage.getItem('authState');
console.log('1', storedAuthData);
return storedAuthData != null ? parseJson(storedAuthData) : null;
}catch(e){
console.error(e);
}
}
//get a memoized version of the callback
const getAuthStateData = React.useCallback(_getAuthStateData,[])
useEffect(() => {
async function asyncFunc() {
const authStateData = await getAuthStateData();
console.log('3', authStateData);
}
asyncFunc(); //prevent a linter error about using an `async` function directly inside `useEffect` by wrapping an async function and calling it
},[getAuthStateData]) //because we use getAuthStateData, it should be a dependency -- that's why we memoized it above