如何在异步函数中等待 fetch 的响应？

Question

如果我查看控制台，它会给我：

coursesbody is: 
Promise { "pending" }
​
<state>: "pending"

const fetchCourses = async args => {
    await fetch(`/coursemanagement/getschoolcourse`, {
      method: "POST",
      body: JSON.stringify({ schoolId: currentSchool2 }),
      headers: {
        "Content-Type": "application/json"
      }
    }).then(res =>{
      const body = res.json();
      console.log("coursesbody is:", body)
      return res.json()
    })
  };

等待响应的正确方法是什么。我很难理解 js 中的 await/async。

编辑： 在 useEffect 我现在正在调用

useEffect(() => {
    setSchoolsCoursesDocents()
}

setSchoolsCoursesDocents() 是：

 const setSchoolsCoursesDocents = async () => {
    const schools= await fetchSchools();
    const courses = await fetchCourses(schools);
    const docents = await fetchDocents(courses);
  };

fetchSchools 看起来像：

const fetchSchools = async () => {
    const result = await fetch(`/coursemanagement/getschools`, {
      method: "GET"
    });
    const body = await result.json();
    setSchools(body);
    setCurrentSchool1(body[0].id)
    setCurrentSchool2(body[0].id)
  };

然后将状态 currentSchool2 用于：

 const fetchCourses = async args => {
    console.log("currentSchool2 is", currentSchool2)
    const result = await fetch(`/coursemanagement/getschoolcourse`, {
      method: "POST",
      body: JSON.stringify({ schoolId: currentSchool2 }),
      headers: {
        "Content-Type": "application/json"
      }
    });
    const body = await result.json();
    setCourses(body);
    setCurrentCourse(body[0].courseId);
  };

但是 console.log 是未定义的，但是 currentSchool2 应该在第一次获取时设置为 1

Answer 1

这是异步等待的方法

const fetchCourses = async args => {
    const res = await fetch(`/coursemanagement/getschoolcourse`, {
      method: "POST",
      body: JSON.stringify({ schoolId: currentSchool2 }),
      headers: {
        "Content-Type": "application/json"
      }
    });
    const body = await res.json();
    console.log("coursesbody is:", body)
    return body;
  };

  // here is how you call this function
  const data = await fetchCourses();

// If you have multiple functions and data from one function is being used in second and so on then you can do something like
  const schools= await getSchools();
  const courses = await getCourses(schools);
  const docents = await fetchDocents(courses);