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

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

const[index，setIndex]=useState（0）；
const[roll，setRollNo]=useState（1）；
const[sem，setSemester]=使用状态（1）；
useffect（（）=>{
getMyValue（）；
}, []);
const getMyValue=async（）=>{
试一试{
setIndex（JSON.parse（wait AsyncStorage.getItem（'@branch'））| | 0）；
setSeMaster（JSON.parse（wait AsyncStorage.getItem（'@sem'））|| 1）；
setRollNo（JSON.parse（wait AsyncStorage.getItem（'@roll'））| | 1）；
}捕获（e）{
//控制台日志（e）；
}
};

您可以使用

承诺。所有

const[索引、学期、卷]=等待承诺([
AsyncStorage.getItem（“@branch”），
AsyncStorage.getItem（'@sem'），
AsyncStorage.getItem（'@roll'）]；
setIndex（JSON.parse（index）| | 0）；
setSeMaster（JSON.parse（学期）| | 1）；
setRollNo（JSON.parse（roll）| 1）；

或者，如果你想把这些东西转化为答案中推荐的映射怪物，你就去吧

const参数=['@branch'，'@sem'，'@roll']；
const defaultValues=[0,1,1]；
const[索引、学期、卷]=等待承诺(
参数映射（AsyncStorage.getItem））
.then（（values）=>values.map（（pr，index）=>JSON.parse（pr）| | defaultValues[index]）；
setIndex（索引）；
教师（学期）；
设置辊号（辊）；

使用

等待…

我们使用一个作业数组来获取项目，然后在

wait

之后，我们可以根据其类型设置每个项目的状态

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

const response=[]
const jobs=[“@branch”、“@sem”、“@roll”]
等待（作业项）{
const res=await AsyncStorage.getItem（item）；
响应推送({
类型：项目，
物件
})
}
/**
回应
[ 
{类型：“@branch”，res:}，
{类型：“@sem”，res:}，
{类型：“@roll”，res:}]
*/ 
response.forEach（项目=>{
常量{type，res}=item；
如果（类型==“@branch”）{
setIndex（JSON.parse（res））
}else if（类型==“@学期”）{
setSeMaster（JSON.parse（res））
}否则如果（类型==“@滚动”）{
setRollNo（JSON.parse（res））
}
})

要并行执行多个承诺，您需要将它们组织为数组并执行unsing Promise。所有：

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

---

如果事件处理程序是异步的，React JS不会批处理状态更新。 在您的示例中，当您在等待

AsyncStorage.getItem

时，它们不是批处理的

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

---

参考资料：

此处不需要异步等待，因为您不想等待，只需使用承诺即可

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