前言
当开发 Vue.js 应用程序时，会发现经常会发生错误。这些错误可能由许多因素引起，例如代码逻辑错误、网络请求错误以及 JavaScript 运行时错误等。在处理这些错误时，合适的方法能够帮助我们更好地调试、修复和预防错误，这篇文章就是要针对 Vue.js 应用程序中的错误处理给出一个完整的指南，帮助前端开发者更好地处理错误。
基础错误处理
在 Vue.js 应用程序中，要处理错误需要掌握以下几个基础技术：
错误边界
Vue.js 中内置的 <template> 组件支持使用 v-on 来捕获 error 事件。这样可以处理来自子组件中的错误。当子组件发生错误时，父组件可以将其显示为替代内容，或在错误边界内处理错误。
-- -------------------- ---- ------- ---------- ----- ---- ----------------- ------------ -------- ---- --------------------- -------- ------ ----------- -------- ------ ------- - ------ - ------ - ------ ------ ------------- -- -- -- -------- - ------------------- --- ----- - ---------- - ----- ----------------- - -------------------- -- --------- - -- --------- - ----------------- -- - --------------------------------- ------------------- --- -- --------------- - ---------------------------------- ------------------- - -- ---------展开代码
try/catch
在 JavaScript 中，try/catch 是一种常见的错误处理方法。可以使用 try/catch 来截获代码中的错误并提供恰当的错误消息。在 Vue.js 中，可以使用该方法来处理异步函数中的错误：
async function fetchData () { try { const response = await axios.get('/api/data'); return response.data; } catch (err) { console.log(err); // 输出错误信息 } }
Promise.catch
在使用 Promise 时，对于 Promise.reject 或 Promise 中的异常，可以使用 Promise.catch 捕获错误。例如：
axios.get('/api/data') .then(response => { console.log(response.data); }) .catch(err => { console.error(err); });
Vue.config.errorHandler
Vue.config.errorHandler 是 Vue.js 中用于全局错误处理的配置方法。该方法会在遇到错误时被调用，可以在控制台中查看错误信息。
Vue.config.errorHandler = function (err, vm, info) { console.log(`Error: ${err.toString()}\nInfo: ${info}`); };
console.error
控制台是一个非常重要的调试工具，使用 console.error 可以在控制台中输出错误信息。
axios.get('/api/data') .then(response => { console.log(response.data); }) .catch(err => { console.error(err); });
上述几种基础技术是处理 Vue.js 应用程序中错误的基础方法，在实际应用中可以根据需要选择使用。
处理网络请求错误
Vue.js 应用程序中最常见的错误之一是网络请求错误。在处理网络请求错误时，需要注意以下几点：
监听全局的 axios 错误
如果你使用的是 axios 这个库，可以监听全局的错误事件：
import axios from 'axios'; axios.interceptors.response.use(null, err => { console.log(`Error: ${err.toString()}\nInfo: ${JSON.stringify(err.response.data)}`); });
错误状态码检查
在处理网络请求时，可以检查 HTTP 响应状态码来确定是否出现了错误。标准的 HTTP 错误状态码如下：
| 状态码 | 内容 |
|---|---|
| 200 | 成功 |
| 201 | 请求已成功并创建了一个新的资源 |
| 204 | 请求成功，但没有响应的内容 |
| 400 | 客户端请求的语法错误，服务器无法识别 |
| 401 | 请求未经授权 |
| 403 | 服务器理解请求，但拒绝执行 |
| 404 | 找不到请求的资源 |
| 500 | 服务器内部错误 |
-- -------------------- ---- ------- ---------------------- -------------- -- - --------------------------- -- ---------------- --- ---- - -------------------- - -- ---------- -- - ------------------- -- -------------------- --- ---- - ------------------------ - ---展开代码
重新尝试请求
当网络请求失败时，可以尝试重新请求。这通常发生在服务端忙碌时，可以为每个请求类挂一个计数器，并在尝试多次后停止：
-- -------------------- ---- ------- -------- -------------------------- - -- - --- ----- - -- ------ -------- ----------- - ------ ---------------------- -------------- -- - ------ -------------- -- ---------- -- - -- ------ - --------- - ----- -- -- ----------------------- -------- ------- ------ ------------ - --------------------- -------- -------------- ----- ---- --- -- -展开代码
处理 JavaScript 运行时错误
JavaScript 运行时错误指的是在 Vue.js 应用程序中由于代码逻辑而引起的错误。在处理 JavaScript 运行时错误时，需要注意以下几点：
监听全局错误
可以监听全局错误事件来捕获 JavaScript 运行时的错误以及其他异常情况：
window.addEventListener('error', function (e) { console.error(`JavaScript错误\nMessage：${e.message}\nFile：${e.filename}\nLine：${e.lineno}`); });
Vue.config.errorHandler
Vue.config.errorHandler 方法可以给 Vue.js 应用程序提供全局的错误处理：
Vue.config.errorHandler = function (err, vm, info) { console.log(`Error: ${err.toString()}\nInfo: ${info}`); };
强类型
使用强类型的语言（如 TypeScript）可以有效地避免出现运行时错误。
结语
Vue.js 应用程序中的错误处理非常重要。我们可以使用 try/catch、Promise.catch、Vue.config.errorHandler 等基本技术来处理错误。为了更好地恢复并防止错误的发生，我们可以使用网络请求错误检查、JavaScript 运行时错误监听等技巧。希望这篇对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd7bfde46428fe9e70f328
