同一天时间，出现两个一毛一样的错误类型，都是后端原本改返回正常数据的接口，结果返回了 null，然后前端页面显示异常，测试就找到前端直接说页面代码有问题，毕竟页面显示异常了，当然第一时间找前端~~

问题一：

12const res = await axios.get('/api/getData1')for (const item of res.data) {}

正常情况以上代码 res.data 会返回数组，但在某些特殊情况，后端直接塞给前端一个 null，导致前端页面报错，页面显示不出来！！

问题二：

12const res = await axios.get('/api/getData2')const res = res.data.size.toFixed(2)

正常情况 size 应该返回一个文件大小的数字，可脏数据导致接口又吐了一个 null，前端又报错！！

反思

此类问题解决起来也简单，利用 ES6 的可选链语法 ?. 就可以轻松解决，比如说上面代码就可以改写成这样：

123for (const item of (res?.data || [])) {...}const res = res?.data?.size?.toFixed(2)

问题很简单，但出现问题必须要思考以后怎么避免对吧？此类问题就算用 TS 也无法完全避免，毕竟接口返回数据可以是任意值，TS 也只能做到静态类型检查，无法对运行时的数据进行分析！！

然后就抓掉了几十根头发思索，觉得这种情况不就是所谓的“防御性编程”吗？防御性编程可是有好多方面的，不止这一处！！

防御性编程

防御性编程 就像防御性驾驶一样，要假想可能存在的问题，将问题扼杀在腹中！！下面就从多方面分析下需要有防御性编程的场景。

1、请求错误处理

如果 http 响应状态非 200，不进行错误处理，可能会导致页面显示异常。推荐做法：

123456fetchData()  .then(data => validateData(data)) // 验证数据  .catch(err => {    console.error('Fetch failed', err);    showUserFriendlyError(); // 降级处理，比如页面显示友好的错误提示  });

2、API 响应处理

此类问题就跟文章开头一样，拿到了非法数据直接使用，导致页面显示异常。推荐做法：

123456const response = await request.get('/api/users');if (!response || !Array.isArray(response.data)) {  return showError(); // 降级处理，比如页面显示友好的错误提示}// 正常的业务逻辑

3、数据边界处理

此类问题跟 API 响应判断差不多，多用于一些值不存在的情况，比如说界面上要显示某个字段，但不确定这个值是否存在的时候：

12const item = array[index] ?? '默认值';const name = obj?.nested?.name || '未知';

4、输入验证

所有用户输入的数据都不可信，必须要对用户输入进行校验，当然前端的校验都能绕过，这一步后端也必须严格校验才行！！

这一步可不止验证输入框中的内容，还需要校验文件名长度，比如说后端数据库限制了文件名 chat(20)，这时候如果上传的文件名超过 20 字符，就会导致插入失败！！这么多年的编程生涯，感觉输入校验都是前端多于后端~~

12345678// 输入非空判断if (typeof userInput !== 'string' || userInput.trim() === '') {  return;}// 利用正则进行更安全的验证if (!/^[a-zA-Z0-9]{2,20}$/.test(userInput)) {  return;}

5、DOM操作安全

也是与用户输入有关，如果用户输入非法的富文本内容，可能会引发 XSS 漏洞，在显示富文本的地方，就必须要进行安全过滤：

123// DOMPurify 处理 XSSimport DOMPurify from 'dompurify';element.innerHTML = DOMPurify.sanitize(userInput);

在使用 Vue 框架时，应尽可能少使用 v-html 赋值！！

6、特性检测

JS 一年一个版本，有时候一些新的特性只有部分浏览器支持，在使用时就必须考虑不支持的浏览器怎么处理：

12345678// 先检测特性是否存在if ('indexedDB' in window) {  indexedDB.open('myDB');} else {  // 降级到localStorage  localStorage.setItem('backup', JSON.stringify(data));  showToast('Using local storage mode');}

7、三方库安全

在引入三方库时，如果资源被篡改，极其容易引发安全问题，有必要使用 SRI 验证资源完整性：

123456<!-- 使用SRI校验资源完整性 --><script   src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js"  integrity="sha384-9uBvFy0VWU1aY9BKlYkK8fRfVhA6x9jD4d5u3dE3fMqHx4BwM4sD4J2u3/5M7wB3"  crossorigin="anonymous"></script>

8、错误隔离

调用三方方法时，如果资源加载失败，或三方 API 修改，容易引发代码报错，最好是用 try-catch 进行错误隔离：

1234567// 错误隔离try {  await processPayment(order);} catch (err) {  rollbackTransaction();  showPaymentError();}

9、静态代码约束

使用 ESLint 进行静态代码校验，提升应用健壮性，同时结合 SonarQube 进行代码质量评估，提升代码质量。