编程 接口一异常你的前端页面就直接崩溃了?

2024-11-18 18:21:01 +0800 CST views 760

接口一异常你的前端页面就直接崩溃了?

前言

在 JavaScript 开发中,细节处理不当往往会导致意想不到的运行时错误,甚至让应用崩溃。可能你昨天上完线还没问题,第二天突然一大堆人艾特你,你就说你慌不慌。

来吧,咱们来捋一下怎么做才能让你的代码更健壮,即使后端数据出问题了咱前端也能稳得一批。

解构失败报错

不做任何处理直接将后端接口数据进行解构

const handleData = (data) => {
  const { user } = data;
  const { id, name } = user;
}
handleData({});
VM244:3 Uncaught TypeError: Cannot destructure property 'id' of 'user' as it is undefined.

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象(装箱)。由于 undefinednull 无法转为对象,所以对它们进行解构赋值时就会报错。

第二种情况,虽然给了默认值,但是依然会报错

const handleData = (data) => {
  const { user = {} } = data;
  const { id, name } = user;
}
handleData({ user: null });

ES6 内部使用严格相等运算符(===)判断一个变量是否有值。所以,如果一个对象的属性值不严格等于 undefined ,默认值是不会生效的。

Good 解法:

const handleData = (data) => {
  const { user } = data;
  const { id, name } = user || {};
}
handleData({ user: null });

数组方法调用报错

从接口拿回来的数据直接用当成数组来用

const handleData = (data) => {
  const { userList } = data;
  const newList = userList.map((item) => item.name);
}
handleData({ userList: null });
handleData({ userList: 123 });
VM394:3 Uncaught TypeError: userList.map is not a function

Good 解法:

const handleData = (data) => {
  const { userList } = data;
  if (Array.isArray(userList)) {
    const newList = userList.map((item) => item.name);
  }
}
handleData({ userList: 123 });

遍历对象数组报错

当数组中某项值是 nullundefined

const handleData = (data) => {
  const { userList } = data;
  const newList = userList.map((item) => item.name);
}
handleData({ userList: [null, undefined] });
VM547:3 Uncaught TypeError: Cannot read properties of null (reading 'name')

Good 解法:

const handleData = (data) => {
  const { userList } = data;
  const newList = userList.map((item) => item?.name);
}
handleData({ userList: [null] });

复杂情况的处理:

const handleData = (data) => {
  const { userList } = data;
  const newList = userList.map((item) => {
    const { id, name, age } = item || {};
    return `用户id是${id},用户名字是${name}, 用户年龄是${age}岁了`;
  });
}
handleData({ userList: [null] });

当可选链操作符较多的情况时,无论是性能还是可读性,解构赋值会更好。

使用对象方法时报错

Object.entries 报错

const handleData = (data) => {
  const { user } = data;
  const newList = Object.entries(user);
}
handleData({ user: null });
VM601:3 Uncaught TypeError: Cannot convert undefined or null to object

Good 解法:

const handleData = (data) => {
  const { user } = data;
  const newList = Object.entries(user || {});
}
handleData({ user: null });

async/await 报错未捕获

常见错误:

const List = () => {
  const [loading, setLoading] = useState(false);
  const getData = async () => {
    setLoading(true);
    const res = await fetchListData();
    setLoading(false);
  }
}

Good 解法:

const List = () => {
  const [loading, setLoading] = useState(false);
  const getData = async () => {
    setLoading(true);
    try {
      const res = await fetchListData();
      setLoading(false);
    } catch (error) {
      setLoading(false);
    }
  }
}

JSON.parse 报错

JSON 字符串解析错误

const handleData = (data) => {
  const { userStr } = data;
  const user = JSON.parse(userStr);
}
handleData({ userStr: 'fdfsfsdd' });
16:06:57.521 VM857:1 Uncaught SyntaxError: Unexpected token 'd', "fdfsfsdd" is not valid JSON

Good 解法:

const handleData = (data) => {
  const { userStr } = data;
  try {
    const user = JSON.parse(userStr);
  } catch (error) {
    console.error('不是一个有效的JSON字符串');
  }
}
handleData({ userStr: 'fdfsfsdd' });

总结

以上列举了 JavaScript 在运行时可能会发生的错误,这些边界情况在开发时不那么容易察觉,静态检查工具如 ESLint 也无能为力。如果使用 TypeScript 可以帮助避免大部分问题,但即使不用 TS,也要在开发时考虑这些情况,才能写出更加健壮的代码。

复制全文 生成海报 JavaScript 前端开发 错误处理

推荐文章

一个简单的打字机效果的实现
2024-11-19 04:47:27 +0800 CST
H5保险购买与投诉意见
2024-11-19 03:48:35 +0800 CST
deepcopy一个Go语言的深拷贝工具库
2024-11-18 18:17:40 +0800 CST
Web 端 Office 文件预览工具库
2024-11-18 22:19:16 +0800 CST
Go 1.23 中的新包:unique
2024-11-18 12:32:57 +0800 CST
php腾讯云发送短信
2024-11-18 13:50:11 +0800 CST
随机分数html
2025-01-25 10:56:34 +0800 CST
Vue3中如何使用计算属性?
2024-11-18 10:18:12 +0800 CST
Vue3中如何实现国际化(i18n)?
2024-11-19 06:35:21 +0800 CST
Vue3中如何处理路由和导航?
2024-11-18 16:56:14 +0800 CST
Vue3中的v-bind指令有什么新特性?
2024-11-18 14:58:47 +0800 CST
PyMySQL - Python中非常有用的库
2024-11-18 14:43:28 +0800 CST
php strpos查找字符串性能对比
2024-11-19 08:15:16 +0800 CST
CentOS 镜像源配置
2024-11-18 11:28:06 +0800 CST
CSS 奇技淫巧
2024-11-19 08:34:21 +0800 CST
PHP 命令行模式后台执行指南
2025-05-14 10:05:31 +0800 CST
程序员茄子在线接单