在继续 axios 中的 post 请求之前等待 get 请求响应

问题描述

我曾尝试在 createSwap 函数中使用 async/await，但它对我不起作用。在创建请求之前，我想运行 getSlotDetails 函数来设置 slotDets，以便它可以在下面的 post 请求中使用。但是，createSwap 函数在发送 post 请求之前不会等待 getSlotDetails 函数完成。我该如何解决这个问题？

  const [slotDets,setSlotDets] = useState([]);
  const getSlotDetails = (moduleCode,slotId,slottype) => {
        axios
          .get(`https://api.nusmods.com/v2/2020-2021/modules/${moduleCode}.json`)
          .then((response) => response.data)
          .then((data) => data.semesterData[0])
          .then((semesterData) => semesterData.tiMetable)
          .then((tiMetable) =>
            tiMetable.filter(
              (slot) => slot.classNo === slotId && slot.lessonType == slottype
            )
          )
          .then((result) => {
            setSlotDets(result);
          });
      };
    
  const createSwap = (
    moduleCode,slottype,currentSlot,desiredSlots,completed,reserved
  ) => {
    dispatch(createRequest());
    getSlotDetails(moduleCode,slottype);
    axios
      .post(
        "http://localhost:3001/api/v1/swaps",{
          module_code: moduleCode,slot_type: slottype,current_slot: currentSlot,desired_slots: desiredSlots,completed: completed,reserved: reserved,venue: slotDets.venue,startTime: slotDets.startTime,endTime: slotDets.endTime,day: slotDets.day,},{
          headers,}
      )
      .then((response) => {
        console.log(response.data);
        dispatch(createSuccess());
        setTimeout(() => {
          dispatch(resetSwap());
        },2000);
      })
      .catch((error) => {
        console.log(error.response.data);
        dispatch(createFail(error.response.data));
        setTimeout(() => {
          dispatch(resetSwap());
        },2000);
      });
  };

解决方法

const makeTwoRequests = async () => {
 try{
   const firstResponse = await axios.get(FIRST_URL);
   if(firstResponse.status === 200){
     const firstResponseData = firstResponse.data;
     const secondResponse = await axios.get(SECOND_URL);
      
     if(secondResponse.status === 200){
       const secondResponseData = secondResponse.data;
     }
   }
 }
 catch(error){
   console.log(error)
 }
}
maketwoRequests()

firstResponseData 和 secondResponseData 可以是状态变量而不是 const 以便更好地访问整个组件