在 Express.js 中，处理 HTTP 请求时，可能会发生各种错误。如果没有正确处理这些错误，可能会向用户显示默认的错误页面或错误消息，这对用户体验来说并不友好。为了提高用户的体验感，我们需要自定义错误页面，显示有意义的错误消息来告诉用户出现了什么问题，以及如何解决问题。本文将介绍如何解决 Express.js 中错误页面的定制问题。
错误处理中间件
在 Express.js 中，错误处理中间件是用来处理应用程序中的错误的。当某个中间件或路由抛出了错误，错误处理中间件就会被触发，这给我们提供了很好的机会去处理错误并显示适当的错误页面。
错误处理中间件定义如下：
app.use(function (err, req, res, next) {
// 处理错误
})上述代码中的四个参数分别是：
err: 错误对象req: 请求对象res: 响应对象next: 调用下一个中间件的函数
当错误发生时，Express.js 会自动查找并调用第一个错误处理中间件。所以，我们可以添加多个错误处理中间件来处理不同类型的错误。
错误处理中间件的代码结构
错误处理中间件的代码结构如下：
app.use(function (err, req, res, next) {
// 处理错误
// 渲染错误页面
})在处理错误时，我们可以使用 res.status(code) 方法来设置 HTTP 响应码，用 res.render(view, locals) 方法来渲染错误页面。
为了让错误页面在整个应用程序中有一个统一的外观和感觉，我们可以使用一个基础页面或布局来渲染错误页面。例如，我们可以定义一个 error.ejs 文件来作为基础页面，然后定义各种错误页面，如 404.ejs 和 500.ejs，来扩展这个基础页面。
-- -------------------- ---- -------
---- --------- ---
--------- -----
------
------
-------------------------
-------
------
---------------------
-- -- ------- - --
---------------------------
-- - --
-------
-------<!-- 404.ejs -->
<% layout('error') %>
<% block('title', '404 Not Found') %>
<% block('message', 'Sorry, the page you requested was not found.') %><!-- 500.ejs -->
<% layout('error') %>
<% block('title', 'Internal Server Error') %>
<% block('message', 'Sorry, something went wrong with the server.') %>实现方式
下面是一个简单的实现方式，用于将我们的自定义错误页面应用到 Express.js 应用程序中：
-- -------------------- ---- ------- -- ----- ---- ----------------- - ------- ---- ----- ------- - ------------------ ----- --- - --------- -- -- --- -- ---------------- ----- ---- ----- - ----------------------------- -- -- --------- ---------------- ----- ---- ---- ----- - -- ---- ------------------------ ----------------------------- - ------ --- -- -- -- ---- ---------------- -------- -- - ------------------- ------- -- ---- ------ --
在上面的代码中，我们定义了两个错误处理中间件。第一个中间件用于处理 404 错误，当某个路由无法匹配时，就会触发这个中间件。第二个中间件用于处理其他类型的错误，例如路由处理函数抛出了异常。在这个中间件中，我们打印出错误栈并向用户显示 500 错误页面。
总结
通过上述方法，我们可以处理在 Express.js 中发生的各种错误，并向用户显示有意义的错误消息。这可以提高用户体验，让用户更容易理解出现的问题，并提供解决问题的方法。为了让错误页面有一个统一的外观和感觉，我们可以使用一个基础页面或布局来渲染错误页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501660195b1f8cacdf1fab9