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

【问题标题】：Making parallel async await calls in ReactJS在 ReactJS 中进行并行异步等待调用
【发布时间】：2020-09-11 02:14:03
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs react-native async-await asyncstorage

【解决方案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);

【讨论】：

【解决方案2】：

使用for await of ...

我们使用job数组来getItem，然后在await之后，我们可以根据每个item的类型来设置它的状态。

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

【讨论】：

【解决方案3】：

要并行执行多个 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);
    }
  };

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案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);
    }
  };

【讨论】：