等待获取请求响应，然后在 axios 中继续发布请求答案

【问题标题】：Wait for get request response before continuing with a post request in axios等待获取请求响应，然后在 axios 中继续发布请求
【发布时间】：2021-06-07 04:36:07
【问题描述】：

我尝试在 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, currentSlot, 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);
      });
  };

【问题讨论】：

不是有两个不同的函数，而是在同一个函数中进行两个 API 调用？在这里查看 cmets：stackoverflow.com/questions/67832623/… 他们可能会有所帮助！

标签： reactjs http post axios get

【解决方案1】：

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，以便更好地访问整个组件

【讨论】：