本菜鸡前端的常见错误处理集合

站长

2023年02月23日 21:51 · 阅读数 16

为什么要进行错误处理

如果你的项目是直接面对C端客户，页面挂了，人家进入你的项目，就是一片白板，啥也操作不了，肯定是重大的事故。

而有的时候，页面挂了，仅仅只是后端的某个字段不是我们想要的数据格式，例如我想要了Array类型。你返回了null, 而前端是如此相信我们后端大兄弟，直接null.find或者null[0]进行取值，导致代码报错，而此时我们又没有进行任何错误处理，导致后续代码不执行，而你后续的代码，刚刚是渲染页面的接口，此时你的页面，就停摆了。

或者某个不是涉及主流程的接口报错了，而你又没有进行错误处理，哦豁，你的页面又停摆了，前端仔，你又要挨骂了。

如果我们做了这些错误处理的话，再进行友好的错误提示的话，至少能帮我规避一大半的问题。不至于天天挨骂是吧。下面总结下，我们项目中常用的错误处理方式。

常见错误处理

对某个数据类型，进行方法调用

就是我想要[], 你非得给我null。而我前端直接使用[]才能使用的方法, 例如null.find，就会出现以下错误提示Cannot read properties of null (reading 'find')，出现null的原因，常见于后端直接从数据库取值，不进行转化，如果数据库的字段为空的话，就返回null。对于数据类型错误，常见于，你特别信任你的后端大兄弟一定会给你返回，你们商量好的数据类型。是那种拉钩上吊一百年，不许变的感觉。还是做人太单纯了。

对于这类错误处理，需要在你对某个变量使用某个方法的时候，好好思考下这个变量是真的有这个方法嘛。如果变量没有这个方法咋办。就是上述这个数据类型问题, 我们简单扩充一下，在某个商品列表页面，需要展示价格大于200的商品，后端提供了商品列表接口，但是展示价格大于200的商品，需要前端自己过滤，进行展示。

// 伪代码
let productList = []; // 商品列表
const res = await fetch('example/api')
// 此时 res返回值为 {productList: null }
productList = res.productList
productList = productList.find((item) => item.price > 200)

如果我们像上面这样写，这样直接就挂了。你又得挨骂了哦。其实在我们使用find方法的时候，就要判断如果返回的res.productList是null或者就不是一个数组，我们应该怎么处理。

对于这样的错误场景的处理方式，如果是需要数组才能使用的方法，可以直接采用下面这种方式。

if (Array.isArray(res.productList)) {
    productList = res.productList
} else {
   productList = []
}

if (!productList.length) {
   tipText = '亲亲~暂无价格大于200的商品哦~'
}

当然我们又不是仅仅只是数组才需要这样判断，我们还有其他的数据类型，也需要这样判断的，常见的数据类型判断总结如下：

// 以下来源于网络总结

// 如果比较简单的判断
typeof 'a'  // "string"
typeof true  // "boolean"
typeof undefined // "undefined"
typeof [] // object
typeof {} // object
typef null // object

// 如果要区分object类型，为null, 还是null, 还是{}，可采取下面这种
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call('') // "[object String]"
Object.prototype.toString.call(Symbol()) // "[object Symbol]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(false) // "[object Boolean]
Object.prototype.toString.call([]) // "[object Array]"
Object.prototype.toString.call({}) // "[object Object]"

// 例如上述判断，返回的商品列表，是否为一个数组，也可以采用下面这种方式
if (Object.prototype.toString.call('res.productList')) {
 // 如果是数组，才....
}

// 判断某个是变量是一个字符串
if (typeof 'xx' === 'string') {
  // 如果是字符串，才...
}

对某个数据类型，进行取值

常见的场景是，后端返回一个对象，这个对象，人家是一定要的数据结构的。你需要取这个对象，某个key的值，而这个key, 有时候你的后端大兄弟，他又没有返给你。而你依然相信他一定会返回给你，导致你取值又报错了。你又要本挨骂了。这样说好像有点太干了，我整个例子。

// 这是一段正常数据
const res = { a: { b: '天天挨骂，又咋样，有本事开出我啊 '}} 
// 你需要res的a下面的b,你就这样写。
const test = res.a.b

// 突然，你的后端大兄弟，给你返回了这样的数据，此时，你代码又报错了，出现了以下错误信息
// `Uncaught TypeError: Cannot read properties of undefined (reading 'b')`
// 这次，你又得挨骂了哦 哈哈哈哈哈哈
const res = { a:  null }

对于这样的错误场景，我们一般采用如下方式处理：

// 方式一，兼容性需要自己处理下
const test = res?.a?.b 

// 方式二, 求助lodash大神的get方法
import { get } from lodash
const test = get(res, 'a.b', '')
// 具体api就不再赘述，可自行上官网查询api

终极错误处理

我就try...catch怎么了。如果你无法预判到，某个环节会出现问题，可采用这种方式，但是就我而已，大部分的错误，都能按照上述两种方式处理，使用try...catch的地方，并不是特别多。请千万不要满屏都是try...catch，看的我头疼。

结尾

以上就是本菜鸡前端规避被骂的常见错误处理集合分享了。

如有错误，恳请指正。