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

或者，如果您想按照答案中的建议将这种东西变成映射怪物，那么您 go ...

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

Answer 2

要并行执行多个 Promise，您需要将它们组织为数组并执行 unsing Promise.all：

  const [index, setIndex] = useState(0);
  const [roll, setRollNo] = useState(1);
  const [sem, setSemester] = useState(1);

  useEffect(() => {
    getMyValue();
  }, []);

  const getMyValue = async () => {
    try {
      const itemsArr = ['@branch', '@sem', '@roll']
      const result = await Promise.all(promisesArr.map(item => AsyncStorage.getItem(item)))
      setIndex(JSON.parse(result[0]) || 0);
      setSemester(JSON.parse(result[1]) || 1);
      setRollNo(JSON.parse(result[2]) || 1);
    } catch (e) {
      //  console.log(e);
    }
  };

Answer 3

如果事件处理程序是异步的，React JS 不会批处理 state 更新。 在您的示例中，当您在AsyncStorage.getItem上等待时，它们不会被批处理。

您可以 @Józef 的解决方案来批量处理它们

参考： https://github.com/facebook/react/issues/14259#issuecomment-450118131

Answer 4

for await of...

我们使用作业数组来获取项目，然后在await之后，我们可以根据项目的类型设置每个项目的 state。

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

Answer 5

您在这里不需要异步等待，因为您不想等待只需使用 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);
    }
  };