Nuxt.js 2：从 Vuex Action 中优雅地重定向到自定义错误页面

在复杂的 nuxt.js 应用程序中，数据获取逻辑通常封装在 vuex action 中。当这些 action 在执行 api 请求时遇到错误（例如网络问题、服务器响应错误），我们需要一种机制来优雅地处理这些错误，并引导用户到一个友好的错误页面，而不是让应用崩溃或显示不明确的错误信息。本文将深入探讨如何在 vuex action 中捕获错误，并利用 nuxt.js 提供的 $nuxt.error 方法实现程序化重定向。

1. 理解 Nuxt.js 的错误处理机制

Nuxt.js 提供了一个内置的错误页面处理机制。当应用程序发生错误时，Nuxt 会尝试渲染项目根目录下的 layouts/error.vue 文件（如果存在）。这个 error.vue 组件会接收一个 error prop，其中包含了错误的详细信息，如 statusCode（HTTP 状态码）和 message。通过自定义 error.vue，我们可以为用户提供一个统一且美观的错误展示界面。

2. 在 Vuex Action 中捕获 API 错误

在 Vuex Action 中进行 API 请求时，使用 try...catch 块是捕获异步操作错误的标准做法。这确保了即使请求失败，应用程序也能继续执行，并且我们可以对错误进行日志记录或采取其他恢复措施。

以下是一个典型的 Vuex Action 结构，用于发起 API 请求并捕获潜在错误：

// store/modules/votes.js

import { SET_VOTES_LIST } from '../mutation-types';

export default {
  actions: {
    async fetchVotes ({ commit }) {
      try {
        // 假设 this.$secured 是一个已配置的 Axios 实例或其他 HTTP 客户端
        const response = await this.$secured.get('exampleapi.com/votes');
        // 处理响应数据，例如合并 JSON:API 格式的数据
        const merged = jsonApiMerge(response.data.included, response.data.data);

        // 提交 mutation 更新状态
        commit(SET_VOTES_LIST, merged);
      } catch (err) {
        // 错误捕获，此时需要重定向到错误页面
        console.error('获取投票列表失败:', err);
        // 这里是重定向逻辑的实现点
      }
    }
  }
};

在上述 catch 块中，我们捕获了 fetchVotes Action 执行期间可能发生的任何错误。此时，我们的目标是将用户重定向到 Nuxt 的错误页面。

立即学习“前端免费学习笔记（深入）”；

3. 程序化重定向到 Nuxt 错误页面

在 Vuex Action 的 catch 块中，直接访问组件实例上的 $error 方法（如 this.$error）通常是不可行的，因为 Vuex Action 的 this 上下文指向 Vuex Store 实例，而非 Vue 组件实例。然而，Nuxt.js 提供了一个全局可访问的 $nuxt 实例，其中包含了 error 方法，可以用于程序化地触发错误页面。

正确的做法是使用 return this.$nuxt.error({ statusCode: ..., message: ... })。this.$nuxt 在 Nuxt.js 应用的许多上下文中都是可用的，包括通过插件注入到 Vuex Store 中，或者在 Nuxt 的上下文中被访问。

修改后的 Vuex Action 如下所示：

Facetune

一款在线照片和视频编辑工具，允许用户创建AI头像

下载

// store/modules/votes.js

import { SET_VOTES_LIST } from '../mutation-types';

export default {
  actions: {
    async fetchVotes ({ commit }) {
      try {
        const response = await this.$secured.get('exampleapi.com/votes');
        const merged = jsonApiMerge(response.data.included, response.data.data);

        commit(SET_VOTES_LIST, merged);
      } catch (err) {
        console.error('获取投票列表失败:', err);

        // 提取错误信息，例如从 Axios 错误对象中获取
        const statusCode = err.response && err.response.status ? err.response.status : 500;
        const errorMessage = err.message || '服务器内部错误';

        // 使用 this.$nuxt.error 方法重定向到错误页面
        // 注意：这里使用 return 是为了确保在触发错误后，Action 不会继续执行后续代码
        return this.$nuxt.error({ statusCode: statusCode, message: errorMessage });
      }
    }
  }
};

关键点：

• this.$nuxt.error() 方法接收一个对象作为参数，该对象至少应包含 statusCode 和 message 属性。
• statusCode 通常是 HTTP 状态码（如 404, 500），也可以是自定义的错误码。
• message 是一个描述性错误信息，可以用于向用户展示。
• 在调用 this.$nuxt.error() 后，使用 return 语句是一个好习惯，它能立即终止当前 Action 的执行，防止在错误发生后，后续的逻辑被意外触发。

4. 自定义错误页面 (error.vue) 的实现

当 this.$nuxt.error() 被调用后，Nuxt.js 会渲染 layouts/error.vue 组件。这个组件会通过 error prop 接收我们传递的错误对象。

以下是一个简单的 error.vue 组件示例：

在这个 error.vue 组件中，我们可以根据 error.statusCode 来展示不同的错误信息和页面布局，从而为用户提供更具体的反馈。

5. 注意事项与最佳实践

• 错误信息的粒度：在 this.$nuxt.error() 中传递的 message 应该对用户友好，避免暴露过多的技术细节。完整的错误栈或敏感信息应记录在服务器日志或通过其他监控工具处理。
• 服务端渲染 (SSR) 考量：在 SSR 模式下，this.$nuxt.error() 同样有效。它会在服务器端触发错误页面渲染，并将错误信息传递给客户端。
• 全局错误处理：对于更复杂的应用，可以考虑实现一个全局的错误处理插件或中间件，集中管理所有 API 错误和重定向逻辑，避免在每个 Vuex Action 中重复代码。
• 错误类型区分：根据不同的错误类型（例如，认证失败、权限不足、资源不存在），可以传递不同的 statusCode 和 message，让 error.vue 页面能更精确地响应。
• this.$nuxt 的可用性：确保在 Vuex Action 中 this.$nuxt 是可访问的。通常，在 Nuxt 的插件中配置 Axios 或其他 HTTP 客户端时，可以将 Nuxt 上下文注入到请求实例中，从而使 this.$secured 能够间接访问到 $nuxt。如果 this.$nuxt 不直接可用，你可能需要将 context.app.$nuxt 作为参数传递给你的 Action 或通过其他方式使其可访问。

总结

通过 this.$nuxt.error() 方法，Nuxt.js 2 提供了一种强大且灵活的方式，允许开发者在 Vuex Action 等非组件上下文中，程序化地触发错误页面的渲染。结合 try...catch 块和自定义的 error.vue 组件，我们可以构建出健壮且用户友好的 Nuxt.js 应用，即使在面对 API 请求失败等异常情况时，也能提供平滑的用户体验。正确地处理和展示错误信息，是提升应用程序专业性和用户满意度的关键一环。