使用FETCH从服务器获取页面有什么意义吗?当我看到我的项目中的一些页面导航时,我发现了我的一个小组成员写的这段代码.

fetch("/user/home")
    .then((response) => {
        if(!response.ok)
            throw new Error("Can't go to home.");

        location.href = response.url;
    })
    .catch((error) => console.error("Error:", error));

我们讨论的GET个人基本上是这样做的:

router.get("/home", (req, res) => {
  res.render("userhome");
});

这基本上是在做相同的事情,就好像我输入了以下内容来替换它:

location.href = "/user/home";

如果您可以在1行内完成,那么在6行页面之间导航有什么意义?我是不是明白了一些重要的事情?

推荐答案

所以,是的,location.href = "/user/home"; 对于纯导航目的而言,它比第一个涉及FETCH请求的方法更简单、更直接.如果您所需要做的只是导航到一个新页面,那么使用单行代码是完全可以接受的(也是更可取的).

但是,使用FETCH向服务器发出请求可以提供更精细的控制,并且根据要求有几个好处:

FETCH允许更好的错误处理.如果在try 访问"/user/home"时出现服务器错误,Fetch允许您捕获错误并在应用程序中优雅地处理它.直接设置Location.href不会给你任何有关服务器错误的信息,浏览器只会try 加载新的URL,并可能显示默认的错误页面.

Fetch允许您在实际导航到新页面之前判断条件.例如,您可以在重定向之前判断响应状态是否为200(OK).如果状态不是200,您可以阻止重定向,并可能向用户显示一条消息.

但请记住,代码通常不仅仅是实现一个功能-它还涉及灵活性、健壮性和面向future 的构建.Fetch方法可以为future 更复杂的行为提供一个框架,避免提前过度设计它,但一定要考虑一下future 可能需要做什么.

在您的示例中,FETCH请求似乎并没有做比单行location.href更多的事情-因此,在本例中,FETCH请求可能是过度杀伤力.

Javascript相关问答推荐

获取POS餐厅会话用户/收银员

验证嵌套 colored颜色 代码的结果

try 在addEventHandler内设置表单的文件输入.值=空

Python类实现的JavaScript吊坠是什么样子的?

fetch在本地设置相同来源的cookie,但部署时相同的代码不会设置cookie

Next.js Next/Image图像隐含性有任何类型-如何修复?

D3多线图显示1线而不是3线

使用续集和下拉栏显示模型属性

. NET中Unix时间转换为日期时间的奇怪行为

如何用拉威尔惯性Vue依赖下拉?

使用LocaleCompare()进行排序时,首先使用大写字母

当Redux提供程序访问Reduxstore 时,可以安全地从Redux提供程序外部调用钩子?

Angular 中的类型错误上不存在获取属性

material UI按钮组样式props 不反射

如何创建返回不带`new`关键字的实例的类

NG/Express API路由处理程序停止工作

如何防止ionic 输入中的特殊字符.?

Reaction useState和useLoaderData的组合使用引发无限循环错误

JavaScript将字符串数字转换为整数

使用API调用的VUE 3键盘输入同步问题