如何在一个 Vue 应用中，设计一个通用的异常处理和降级方案，以应对 API 请求失败或组件渲染错误？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，今天我们来聊聊 Vue 应用里那些“不听话”的异常，以及如何优雅地“驯服”它们，让我们的应用在面对 API 崩盘或者组件罢工时，也能保持一丝体面，不至于直接给用户甩个白板。

开场白：人生不如意事十之八九，Bug 也一样

生活嘛，总会遇到点意外。写代码也一样，Bug 就像隔壁老王，总会时不时来串个门。API 时不时抽个风，组件偶尔闹个小情绪，都是家常便饭。所以，我们需要一套完善的异常处理和降级方案，未雨绸缪，防患于未然。

第一部分：异常处理的艺术

异常处理，简单来说，就是“当事情出错时，我们该怎么办”。Vue 应用的异常主要来自两个方面：API 请求和组件渲染。

1. API 请求异常处理

API 请求失败，可能是网络问题，可能是服务器宕机，也可能是后端程序员偷偷改了接口（手动狗头）。总之，我们需要一个统一的地方来处理这些错误。

集中式异常处理：利用 axios 拦截器

axios 是 Vue 应用中最常用的 HTTP 客户端。我们可以使用 axios 的拦截器来集中处理 API 请求的异常。

// src/utils/request.js (或者你喜欢的任何地方)
import axios from 'axios';
import { ElMessage } from 'element-plus'; // 或者你喜欢的任何消息提示组件

const request = axios.create({
    baseURL: '/api', // 你的 API 基础 URL
    timeout: 5000 // 请求超时时间
});

// 请求拦截器
request.interceptors.request.use(
    config => {
        // 在请求发送之前做一些处理，例如添加 token
        // config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
        return config;
    },
    error => {
        // 处理请求错误
        console.error('请求错误：', error);
        return Promise.reject(error);
    }
);

// 响应拦截器
request.interceptors.response.use(
    response => {
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        return response.data;
    },
    error => {
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        console.error('响应错误：', error);

        // 统一处理错误
        let message = '未知错误';
        if (error.response) {
            // 服务器返回了错误信息
            switch (error.response.status) {
                case 400:
                    message = '请求错误 (400)';
                    break;
                case 401:
                    message = '未授权，请重新登录 (401)';
                    // 这里可以跳转到登录页面
                    break;
                case 403:
                    message = '拒绝访问 (403)';
                    break;
                case 404:
                    message = '资源未找到 (404)';
                    break;
                case 500:
                    message = '服务器错误 (500)';
                    break;
                default:
                    message = `服务器错误 (${error.response.status})`;
            }
        } else if (error.request) {
            // 请求已发出，但没有收到响应
            message = '请求超时，请检查网络';
        } else {
            // 发送请求时出了问题
            message = '请求发送失败：' + error.message;
        }

        ElMessage.error(message); // 使用消息提示组件显示错误信息

        return Promise.reject(error);
    }
);

export default request;

在这个例子中，我们使用了 axios 的请求和响应拦截器。

请求拦截器：可以在请求发送前添加一些公共的 header，例如 token。
响应拦截器：可以统一处理 API 的错误，例如根据不同的状态码显示不同的错误信息。

使用方法：

import request from '@/utils/request';

export const getUserInfo = () => {
    return request.get('/user/info');
};

这样，所有的 API 请求都会经过 axios 的拦截器，错误会被统一处理，用户看到的将是友好的提示信息，而不是一堆看不懂的错误代码。

针对特定 API 的异常处理：try...catch

有些 API 特别重要，或者出错的概率比较高，我们可以使用 try...catch 语句来针对性地处理。

import request from '@/utils/request';

export const getData = async () => {
    try {
        const response = await request.get('/data');
        return response;
    } catch (error) {
        console.error('获取数据失败：', error);
        // 这里可以做一些特殊的处理，例如重试，或者显示一个特定的错误信息
        ElMessage.error('获取数据失败，请稍后再试');
        return null; // 返回一个默认值，避免程序崩溃
    }
};

try...catch 语句可以捕获同步和异步的错误。在 try 块中执行可能出错的代码，如果出错，就会跳转到 catch 块中执行错误处理逻辑。

2. 组件渲染异常处理

组件渲染出错，可能是数据格式不对，可能是逻辑写错了，也可能是使用了不兼容的第三方库。总之，我们需要一个机制来捕获这些错误，防止应用崩溃。

全局错误处理：Vue.config.errorHandler

Vue.config.errorHandler 是 Vue 提供的一个全局错误处理钩子。我们可以使用它来捕获组件渲染过程中发生的错误。

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.config.errorHandler = (err, vm, info) => {
    // 处理错误
    console.error('组件渲染错误：', err);
    console.error('发生错误的组件：', vm);
    console.error('错误信息：', info);

    // 这里可以做一些友好的提示，例如显示一个错误页面
    // 或者发送错误报告到服务器
    ElMessage.error('页面出现错误，请稍后再试');
};

app.mount('#app');

在这个例子中，我们使用了 Vue.config.errorHandler 来捕获组件渲染过程中发生的错误。当发生错误时，会将错误信息、发生错误的组件以及错误信息打印到控制台，并显示一个友好的错误提示。

组件内部错误处理：errorCaptured 钩子

errorCaptured 钩子是 Vue 2.5+ 提供的一个组件内部的错误处理钩子。它可以捕获后代组件发生的错误。
```
<template>
    <div>
        <ChildComponent />
    </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
    components: {
        ChildComponent
    },
    errorCaptured(err, vm, info) {
        // 处理来自后代组件的错误
        console.error('子组件渲染错误：', err);
        console.error('发生错误的组件：', vm);
        console.error('错误信息：', info);

        // 返回 false 可以阻止错误继续向上传播
        return false;
    }
};
</script>
```
在这个例子中，errorCaptured 钩子可以捕获 ChildComponent 组件发生的错误。如果返回 false，可以阻止错误继续向上传播，避免影响父组件的渲染。
- errorCaptured 与 Vue.config.errorHandler 的区别：
  - Vue.config.errorHandler 是全局的错误处理钩子，可以捕获所有组件的错误。
  - errorCaptured 是组件内部的错误处理钩子，只能捕获后代组件的错误。

第二部分：降级方案的设计

降级方案，简单来说，就是“当事情出错时，我们如何保证应用还能正常运行”。降级可以分为两种：API 降级和组件降级。

1. API 降级

当 API 请求失败时，我们可以采取以下降级方案：

使用缓存数据

如果 API 请求失败，可以尝试使用缓存的数据。可以将 API 的数据缓存在本地存储中，例如 localStorage 或者 sessionStorage。

import request from '@/utils/request';

export const getData = async () => {
    const cacheKey = 'data';
    const cachedData = localStorage.getItem(cacheKey);

    if (cachedData) {
        try {
            return JSON.parse(cachedData);
        } catch (error) {
            console.error('解析缓存数据失败：', error);
        }
    }

    try {
        const response = await request.get('/data');
        localStorage.setItem(cacheKey, JSON.stringify(response)); // 缓存数据
        return response;
    } catch (error) {
        console.error('获取数据失败：', error);
        ElMessage.error('获取数据失败，使用缓存数据');
        if (cachedData) {
            try {
                return JSON.parse(cachedData);
            } catch (error) {
                console.error('解析缓存数据失败：', error);
                ElMessage.error('缓存数据也失效了，请稍后再试');
                return null;
            }
        } else {
            ElMessage.error('获取数据失败，请稍后再试');
            return null;
        }
    }
};

使用 Mock 数据

如果 API 请求失败，并且没有缓存数据，可以使用 Mock 数据。Mock 数据是一些预先定义好的假数据，可以用来模拟 API 的响应。

import request from '@/utils/request';
import mockData from '@/mock/data.json'; // 引入 Mock 数据

export const getData = async () => {
    try {
        const response = await request.get('/data');
        return response;
    } catch (error) {
        console.error('获取数据失败：', error);
        ElMessage.error('获取数据失败，使用 Mock 数据');
        return mockData; // 返回 Mock 数据
    }
};

注意： Mock 数据只应该在开发环境中使用，在生产环境中应该禁用。

功能降级

如果 API 请求失败，可以禁用一些依赖于该 API 的功能。例如，如果获取用户信息的 API 请求失败，可以隐藏用户头像和昵称。

2. 组件降级

当组件渲染出错时，我们可以采取以下降级方案：

显示错误占位符

如果组件渲染出错，可以显示一个错误占位符，而不是直接显示空白。

<template>
    <div>
        <div v-if="error">
            <p>组件加载失败，请稍后再试</p>
        </div>
        <div v-else>
            <MyComponent />
        </div>
    </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
    components: {
        MyComponent
    },
    data() {
        return {
            error: false
        };
    },
    errorCaptured(err, vm, info) {
        console.error('组件渲染错误：', err);
        this.error = true;
        return false;
    }
};
</script>

使用备用组件

如果组件渲染出错，可以使用一个备用组件来代替。备用组件通常是一个简化版的组件，可以提供基本的功能。

<template>
    <div>
        <component :is="currentComponent" />
    </div>
</template>

<script>
import MyComponent from './MyComponent.vue';
import BackupComponent from './BackupComponent.vue';

export default {
    components: {
        MyComponent,
        BackupComponent
    },
    data() {
        return {
            currentComponent: 'MyComponent'
        };
    },
    errorCaptured(err, vm, info) {
        console.error('组件渲染错误：', err);
        this.currentComponent = 'BackupComponent';
        return false;
    }
};
</script>

隐藏整个组件

如果组件渲染出错，并且没有备用组件，可以隐藏整个组件。这是一种最后的手段，可以避免应用崩溃。

第三部分：一些最佳实践

日志记录

在异常处理过程中，应该记录详细的日志信息，包括错误信息、发生错误的组件、用户信息等。这些日志信息可以帮助我们快速定位和解决问题。可以使用 console.error 或者专业的日志库，例如 winston 或者 log4js。
监控告警

应该对应用进行监控，当发生异常时，及时发送告警信息。可以使用专业的监控工具，例如 Sentry 或者 New Relic。
错误上报

应该将错误信息上报到服务器，以便开发人员及时了解应用的运行状况。可以使用专业的错误上报工具，例如 Sentry 或者 Bugsnag。
用户体验

在异常处理过程中，应该注意用户体验。应该显示友好的错误提示，避免用户看到一堆看不懂的错误代码。

总结

异常处理和降级是 Vue 应用中非常重要的部分。一个好的异常处理和降级方案可以提高应用的稳定性和用户体验。希望今天的分享能帮助你更好地构建健壮的 Vue 应用。

灵魂拷问：

你觉得以上方案还有哪些可以改进的地方？欢迎在评论区留言讨论！

最后，记住，Bug 是程序员的朋友，它们让我们不断学习和成长。拥抱 Bug，拥抱变化，才能成为真正的编程大师！散会！

发表回复 取消回复

发表回复取消回复