在 ReactJS 中进行并行异步等待调用

Question

当前每个值都是在设置前一个值之后设置的，异步调用不会并行执行。如何使这些调用并行执行？

  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);
    }
  };

Answer 1

您可以使用 Promise.all

const [index, semester, roll] = await Promise.all([
AsyncStorage.getItem('@branch'),
AsyncStorage.getItem('@sem'),
AsyncStorage.getItem('@roll')]);

setIndex(JSON.parse(index) || 0);
setSemester(JSON.parse(semester) || 1);
setRollNo(JSON.parse(roll) || 1);

或者，如果您想按照答案中的建议将这种东西变成地图怪物，那么您就可以...

const params = ['@branch', '@sem', '@roll'];
const defaultValues = [0, 1, 1];

const [index, semester, roll] = await Promise.all(
  params.map(AsyncStorage.getItem))
  .then((values) => values.map((pr, index) => JSON.parse(pr) || defaultValues[index]));

setIndex(index);
setSemester(semester);
setRollNo(roll);