搜索
  • 上线还好好的，第二天凌晨白屏，微信全屏艾特我...
  • 发布于 1周前
  • 12 热度
    0 评论
  • 科叼
  • 2 粉丝 242 篇博客
  •   

 在前端开发中，最让人心慌的一件事就是：接口一出问题，整个页面直接崩掉白屏。

其实大部分“崩溃点”都能提前规避。今天我们就用大白话来捋一捋，看看怎么写出更健壮的前端代码。

1. 解构失败：你以为有值，其实啥也没有 

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

结果： 

Uncaught TypeError

👉 你以为user有东西，其实是undefined。对undefined解构，直接崩。

✅ 正确写法： 

const handleData = (data)=> {
  const { user } = data;
  const { id, name } = user || {}; // 没有就给空对象
}

2. 数组方法：把非数组当数组用 

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

结果： 

map is not a function

👉 因为null不是数组，当然不能map。

✅ 正确写法： 

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

机-会

技术大厂，前端-后端-测试，全国均有机会，感兴趣可以试试。待遇和稳定性都还不错~


3. 遍历对象数组：数组里混进了“内鬼” 

handleData({ userList: [null, undefined] })

👉 一旦item是null，访问item.name就爆炸。

✅ 正确写法： 

const newList = userList.map((item)=> {
  const { id, name, age } = item || {};
  return `用户id是${id}, 用户名是${name}, 年龄是${age}`;
});

4. JSON.parse：你信了它，其实它是乱七八糟的字符串 

JSON.parse('fdfsfsdd') // 报错

👉 一旦传入的不是合法 JSON，直接炸。

✅ 正确写法： 

try {
  const user = JSON.parse(userStr);
} catch {
  console.error('不是合法的 JSON 字符串');
}

5. async/await：没加 try...catch 的坑 

const getData = async () => {
  setLoading(true);
  const res = await fetchListData(); // 报错后一直 loading
  setLoading(false);
}

👉 一旦fetchListData报错，loading状态永远停不下来。

✅ 正确写法： 

const getData = async () => {
  setLoading(true);
  try {
    const res = await fetchListData();
  } catch (err) {
    console.error(err);
  } finally {
    setLoading(false); // 无论成败都关闭 loading
  }
}

6. 动态导入模块：文件没了、写错了 

const module = await import('./dynamicModule.js'); // 直接崩

✅ 正确写法： 

try {
  const module = await import('./dynamicModule.js');
  module.doSomething();
} catch (err) {
  console.error('模块加载失败', err);
}

7. 内存溢出：你以为缓存很香，其实炸弹埋好了 

const cache = {};
function addToCache(key, value) {
  cache[key] = value; // 没有清理，越存越多
}

或者闭包大对象不释放，内存爆掉。

✅ 解决思路：

  • 定期清理缓存
  • 及时取消定时器
  • 移除事件监听器

8. API 兼容性：版本不同，代码罢工

👉 比如老版本 Node 根本没有fetch，直接用就会挂。

✅ 解决方案：

  • 用axios这种兼容性更好的库
  • 或者提前做版本判断


总结：如何写“不会轻易崩”的前端代码？

原则：不信任任何外部数据，多加一层判断，少一次崩溃。

  • 接口返回的数据，永远别想当然
  • 数组先Array.isArray，对象先兜底{}
  • 异步请求必须try...catch
  • JSON.parse 一定要包try...catch
  • 定时器、缓存、事件监听要记得清理

👀 下次 review 别人的代码时，也可以用这份清单来“排雷”。 祝大家写的页面不再因为一个小小的接口异常就白屏崩溃！


——转载自：龙在天
 


用户评论
可能感兴趣的话题