我在 React 上获取 Symfony API,即使只有 3 行,也需要 2 秒来获取和显示数据。
如何优化时间?
视频:https://imgur.com/a/iGaFW0L
录制视频的时候,时间长一点,就是这样,但是快一点
Symfony API
#[Route('/api/projects', methods: ['GET'], name: 'project_get')]
public function getProjects(ProjectRepository $projectRepository): JsonResponse
{
return $this->json(
[
"status" => 200,
"success" => true,
"data" => $projectRepository->findAll(),
"message" => "Operation completed with success"
],
Response::HTTP_OK, [], ['groups' => 'getProjects']
);
}
获取 React
useEffect(() => {
fetch("https://localhost:8000/api/projects")
.then((res) => res.json())
.then((projects) => {
console.log("projects",projects.data);
setProjectsFromApi(projects.data);
setLoading(false);
})
}, [])
如果我用空数组替换数据
#[Route('/api/projects', methods: ['GET'], name: 'project_get')]
public function getProjects(ProjectRepository $projectRepository): JsonResponse
{
return $this->json(
[
"status" => 200,
"success" => true,
"data" => [],
"message" => "Operation completed with success"
],
Response::HTTP_OK, [], ['groups' => 'getProjects']
);
}
作为比较,我有一个 Nodejs API,速度要快得多,而且行数也少不了很多
您可能尝试的一件事不是序列化整个实体,而是准确指定应该序列化实体中的哪些项目。这毕竟是最佳实践。序列化实体,尤其是那些具有关系的实体(在您的情况下,我认为它是项目实体),可能会导致性能不佳或无限递归。
现在,您如何控制要序列化哪些属性? 最快的选择是简单地循环访问存储库返回的项目并选择最终响应的外观。下面的代码片段包含一些有关如何执行此操作的提示。
$projects = $this->projectRepository->findAll();
$response = array_map(
fn (Project $project) => [
'id' => $project->getId(),
'name' => $project->getName(),
'content' => $project->getContent(),
'frameworks' => $project->getFrameworks()->map(
fn (Framework $framework) => [
'id' => $framework->getId(),
'name' => $framework->getName(),
]
)->toArray(),
],
$projects
);
然后只需将响应传递到 JSON 中的数据属性即可。只是一定不要包括关系。
如果这提高了性能,您应该看看 Symfony Serializer,或许还有一些 DTO,这样您就可以控制响应的外观并精确控制映射的完成方式。