我对使用text-align: justify;
挂钩来获取API数据的几种不同方式感到困惑。我想知道是否有“最佳方法”来执行此操作，是否与性能相关，或者是否真的无关紧要。
请考虑以下方法：
多种函数调用，可在单个useEffect内获取API数据：
useEffect 一个函数调用，即可在单个useEffect(() => {
const fetchStudents = async () => {
const students = await studentService.getAll()
setStudents(students)
}
const fetchCourses = async () => {
const courses = await courseService.getAll()
setCourses(courses)
}
const fetchSchedules = async () => {
const schedules = await scheduleService.getAll()
setSchedules(schedules)
}
fetchStudents()
fetchCourses()
fetchSchedules()
}, [])
中获取所有api数据：
useEffect 也许每个API调用都需要多个useEffect(() => {
const fetchAllData = async () => {
const students = await studentService.getAll()
const courses = await courseService.getAll()
const schedules= await scheduleService.getAll()
setStudents(students)
setCourses(courses)
setSchedules(schedules)
}
fetchAllData()
}, [])
：
useEffect还有其他方法可以考虑吗？让它知道。
答案 0 :(得分：1)
在第二个示例中，您等待每个promise解析后再执行下一个，这会影响性能，其他示例都并行运行。
我会在单个useEffect中使用Promise.all，因为我认为它比3个useEffect或3个函数更具可读性，这还将确保我们所有的诺言都将在平行。
请注意，如果Promise.all中的一个Promise拒绝，则该函数将抛出，您将无权访问已解决的Promise
useEffect(() => {
Promise.all([
studentService.getAll().then(setStudents),
courseService.getAll().then(setCourses),
scheduleService.getAll().then(schedules)
])
}, [])