概要：2023马上结束了，这一年我对编写业务代码更加熟练，对3D方向、canvas可视化、ts方向的研究有所收获和进展，同时也犯了很多错，在此记录一下影响项目健壮性的错误。

错误1

详情，列表或者其他数据的请求接口一旦报错，那页面直接空白。这个也不算错，只能说不是很优雅

错误流程详解：

1.一个请求在 HTTP 响应状态码不在 2xx 范围内时会触发Axios 的响应拦截器中的错误拦截（包括网络错误、状态码错误、请求超时），在错误拦截中我们会进行消息提示或者token刷新等操作，然后把错误包裹在Promise.reject()中，并传递下去

2.在使用axios进行请求时，我们没有使用.catch()进行错误处理，而是直接返回给的页面，如果页面中没有try-catch进行捕获错误那么会触发全局的 unhandledrejection 事件，错误信息将被打印到控制台。

解决方案：

1.提前写好数据模型，在请求外面用try-catch处理，出现错误不会导致页面奔溃，而是使用数据模型来顶替

1
2
3
4
5
6
7
8
9
10
let res = {
  data: {
    data: { records: [{}] },
  },
};
try {
  res = await getChangeList(formData);
} catch (e) {
  console.log(e);
}

2.await-to-js库将异步操作的结果分配到err和res两个变量上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import to from 'await-to-js';

async function fetchData() {
  const [err, data] = await to(fetchDataFromAPI());
  
  if (err) {
    // 处理错误情况，例如显示错误消息
    console.error('Error:', err);
  } else {
    // 处理成功情况，使用 data
    console.log('Data:', data);
  }
}

// 内部原理
function to(promise) {
  return promise
    .then((data) => [null, data]) // 如果成功，返回 [null, 数据]
    .catch((error) => [error, undefined]); // 如果失败，返回 [错误, undefined]
}

错误2

接口中如果出现复杂数据类型为null的情况下，而页面又对该数据进行了展示或者处理，则会导致页面直接空白，如常见的array.map，以及数据嵌套较深时data.info.name

解决方案：

1.使用结构赋值并默认赋值，使用参数默认值

1
2
const { logList = [] } = detail;
const srcIp = logList[0]?.srcIp || '--';

2.使用三元运算符对数据进行兼容

1
detail.logList[0] ? detail.logList[0].srcIp : "--"

3.使用可选链?.

1
const srcIp = detail.logList?.[0]?.srcIp || '--';

错误3

兼容性数据处理的位置不够明显和便于维护，如一个复杂添加表单，需要支持二种甚至更多类型的添加，但是他们公用的form-item字段又不同。

解决方案：

1.在confirm中调用添加接口之前，对字段就行转换或者删除。在编辑接口.then后面对数据进行处理。

错误4

代码有时候会冗余，比如使用过多的switch，请求函数多等问题。

解决方案：

1.对于不复杂的场景可以使用map或者数组搭配includes替换switch。

2.请求函数可以提取相同的部分做成工厂函数利用模板字符串拼接正确的路径。

错误5

对于页面的架构有问题，像公用的添加弹窗，主页面和浮层页中都会用到，我是在浮层页又起了一个dialog，然后把service引进来公用，逻辑上是没问题的，但是由于service要用到dialog的ref，且会用响应式对象进行存储该ref，这会导致对ref进行解包，从而导致改变了引用，以至于添加效验出问题。

解决方案：

1.在写代码之前多想想，像dialog和浮层页，应该放在主页面那一层，其他层应该emit事件，或者有主server编写事件再传给子页面。

2.用普通变量存储ref，避免被reactive解包。

错误6

在很多添加编辑的场景，没有做loading或者防抖或者阀门，导致用户可能点击多次，导致数据出问题

解决方案：

1.增加loading动画，这里我建议用阀门。

寄语

千万不要混。你一个月五千，一年6万，20岁混到30岁，10年就混了60来万，存款只估计不到20%。
混一天和努力一天看不到任何差别，但是两三个月以后你会看到气场分别，三五年会看到人生道路不同。
别在该努力的年纪选择安逸时光，别到时候家里人需要你的时候你一无所有。