現在、各値は前の値を設定した後に設定され、非同期呼び出しは並列で実行されません。これらの呼び出しを並行して実行するにはどうすればよいですか?
const [index, setIndex] = useState(0);
const [roll, setRollNo] = useState(1);
const [sem, setSemester] = useState(1);
useEffect(() => {
getMyValue();
}, []);
const getMyValue = async () => {
try {
setIndex(JSON.parse(await AsyncStorage.getItem('@branch')) || 0);
setSemester(JSON.parse(await AsyncStorage.getItem('@sem')) || 1);
setRollNo(JSON.parse(await AsyncStorage.getItem('@roll')) || 1);
} catch (e) {
// console.log(e);
}
};
for await of ...
の使用
ジョブの配列を使用してgetItemを実行し、await
の後に、タイプに基づいて各アイテムの状態を設定できます。
@Jozefの回答も素晴らしいオプションです。そこでは、配列の分解を非常にうまく利用します。
const response = []
const jobs = ["@branch", "@sem", "@roll"]
for await (item of jobs) {
const res = await AsyncStorage.getItem(item);
response.Push({
type: item,
res
})
}
/**
response
[
{ type: "@branch", res: <res> },
{ type: "@sem", res: <res> },
{ type: "@roll", res: <res> }]
*/
response.forEach(item => {
const { type, res } = item;
if (type === "@branch") {
setIndex(JSON.parse(res))
} else if (type === "@semester") {
setSemester(JSON.parse(res))
} else if (type === "@roll") {
setRollNo(JSON.parse(res))
}
})
ここで非同期を待つ必要はないので、代わりにpromiseを使用するだけで待つ必要はありません。
const getMyValue2 = () => {
try {
Promise.all([
Promise.resolve( AsyncStorage.getItem('@branch')),
Promise.resolve( AsyncStorage.getItem('@sem')),
Promise.resolve( AsyncStorage.getItem('@roll'))
]).then(data => {
setIndex(JSON.parse(data[0] || 0));
setRollNo(JSON.parse(data[1] || 1));
setSemester(JSON.parse(data[2] || 1));
});
} catch (e) {
// console.log(e);
}
};