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

Answer 2

使用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))
  }
})

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

Answer 4

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

您可以使用@Józef 的解决方案对它们进行批处理

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

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

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

Making parallel async await calls in ReactJS

javascript

reactjs

react-native

async-await

asyncstorage