在前端开发中,最让人心慌的一件事就是:接口一出问题,整个页面直接崩掉白屏。
其实大部分"崩溃点"都能提前规避。今天我们就用大白话来捋一捋,看看怎么写出更健壮的前端代码。
1. 解构失败:你以为有值,其实啥也没有
js
const handleData = (data)=> {
const { user } = data;
const { id, name } = user;
}
handleData({})
结果:
javascript
Uncaught TypeError
👉 你以为 user
有东西,其实是 undefined
。对 undefined
解构,直接崩。
✅ 正确写法:
js
const handleData = (data)=> {
const { user } = data;
const { id, name } = user || {}; // 没有就给空对象
}
2. 数组方法:把非数组当数组用
js
const handleData = (data)=> {
const { userList } = data;
const newList = userList.map(item => item.name);
}
handleData({ userList: null });
结果:
python
map is not a function
👉 因为 null
不是数组,当然不能 map
。
✅ 正确写法:
js
if (Array.isArray(userList)) {
const newList = userList.map(item => item.name);
}
3. 遍历对象数组:数组里混进了"内鬼"
js
handleData({ userList: [null, undefined] })
👉 一旦 item
是 null
,访问 item.name
就爆炸。
✅ 正确写法:
js
const newList = userList.map((item)=> {
const { id, name, age } = item || {};
return `用户id是${id}, 用户名是${name}, 年龄是${age}`;
});
4. JSON.parse:你信了它,其实它是乱七八糟的字符串
js
JSON.parse('fdfsfsdd') // 报错
👉 一旦传入的不是合法 JSON,直接炸。
✅ 正确写法:
js
try {
const user = JSON.parse(userStr);
} catch {
console.error('不是合法的 JSON 字符串');
}
5. async/await:没加 try...catch 的坑
js
const getData = async () => {
setLoading(true);
const res = await fetchListData(); // 报错后一直 loading
setLoading(false);
}
👉 一旦 fetchListData
报错,loading
状态永远停不下来。
✅ 正确写法:
js
const getData = async () => {
setLoading(true);
try {
const res = await fetchListData();
} catch (err) {
console.error(err);
} finally {
setLoading(false); // 无论成败都关闭 loading
}
}
6. 动态导入模块:文件没了、写错了
js
const module = await import('./dynamicModule.js'); // 直接崩
✅ 正确写法:
js
try {
const module = await import('./dynamicModule.js');
module.doSomething();
} catch (err) {
console.error('模块加载失败', err);
}
7. 内存溢出:你以为缓存很香,其实炸弹埋好了
js
const cache = {};
function addToCache(key, value) {
cache[key] = value; // 没有清理,越存越多
}
或者闭包大对象不释放,内存爆掉。
✅ 解决思路:
- 定期清理缓存
- 及时取消定时器
- 移除事件监听器
8. API 兼容性:版本不同,代码罢工
👉 比如老版本 Node 根本没有 fetch
,直接用就会挂。
✅ 解决方案:
- 用
axios
这种兼容性更好的库 - 或者提前做版本判断
总结:如何写"不会轻易崩"的前端代码?
原则:不信任任何外部数据,多加一层判断,少一次崩溃。
- 接口返回的数据,永远别想当然
- 数组先
Array.isArray
,对象先兜底{}
- 异步请求必须
try...catch
- JSON.parse 一定要包
try...catch
- 定时器、缓存、事件监听要记得清理
👀 下次 review 别人的代码时,也可以用这份清单来"排雷"。 祝大家写的页面不再因为一个小小的接口异常就白屏崩溃!