最近在做中台项目，优化一下历史代码
中台开发体会
接口评审需要注意的事项
- 如果是
Select 数据源，希望返回 {label: xx, value: xx} 的格式
不足
- 中台的响应速度要求很高，如果不能及时响应，会导致业务方block。但是中台业务很多，这个优先级就很难处理。
- 多加一层，其实会多一点出错的概率。可能前端
mock 正常，服务自测也正常，但是中台服务挂了，这种就会浪费时间找问题。
代码问题
1、只有两种条件的时候，第二个返回不需要 else：
修改前：
if (item.cbid) {
return (
<Link to={`/tagrulebook/booktag/${item.cbid}`} className='c404aff' target='_blank'>
{text}
</Link>
);
} else {
return text;
}
修改后：
if (item.cbid) {
return (
<Link to={`/tagrulebook/booktag/${item.cbid}`} className='c404aff' target='_blank'>
{text}
</Link>
);
}
return text;
2、arr.length === 0
- 判断一个数组是否为空，不需要加上 === 0
- 利用可选链，不需要多判断一次是否存在
修改前：
if (value && value.length === 0) {
// do something
}
修改后：
if (value?.length) {
// do something
}
3、重置数组对象不需要 [].concat(arr)
直接利用扩展运算符就好了
修改前：
dataRem[dataRem.indexOf(item)].status = 2
setDataRem([].concat(dataRem))
修改后：
dataRem[dataRem.indexOf(item)].status = 2
setDataRem([...dataRem])
4、利用空值合并操作符 ?? 代替 || 和 三目运算符
代替 ||:
- 比如有些时候，我们就需要一个空，但是用
|| 就有问题了，'' || 1 的结果是 1
- 或者数值的时候，如果我们输入了
0，0 || '暂无金额' 的结果是 暂无金额
修改前：
<div>标签描述：{item?.description || '暂无描述'}</div>
修改后:
<div>标签描述：{item?.description ?? '暂无描述'}</div>
代替 ?...::
修改前：
const val = value ? value : ''
修改后:
5、利用三目运算符 ? :取代 if...else
可以让代码更加简洁
修改前：
if (item.value === '0') {
const name = platform[0][0]['name']
const value = platform[0][0]['value']
onFilter({[name]: value})
} else {
const name = platform[1][0]['name']
const value = platform[1][0]['value']
onFilter({[name]: value})
}
修改后：
const [name, value] = item.value === '0'
? [platform[0][0]['name'], platform[0][0]['value']]
: [platform[1][0]['name'], platform[1][0]['value']]
onFilter({[name]: value})
6、将通用事件放到 catch 的 then 后面做
可能有些人不知道 catch 后面返回的还是一个 promise
修改前：
setLoading(true)
axios
.get(url)
.then(res => {
setLoading(false)
// do something
})
.catch(err => {
setLoading(false)
// do something
})
修改后：
setLoading(true)
axios
.get(url)
.then(res => {
// do something
})
.catch(err => {
// do something
})
.then(() => {
setLoading(false)
})
7、减少无意义的代码
有时候，我们会写出一些冗余代码（当然，有时候适当冗余是好的）
修改前：
function foo () {
if (val === null || val === undefined) return
if (val === '') return
// do something
}
修改后：
function foo () {
if (!!val) return
// do something
}
修改前：
const search = value => {
if (!value) {
initBookInfo(1, 10)
return
}
initBookInfo(1, 10)
}
修改后：
const search = value => {
initBookInfo(1, 10)
}
8、提取通用逻辑
下面的代码是分别点击黑白名单的时候展示对应的数据，代码基本上都是通用的：
修改前：
if (bookRadioBox.includes('1')) {
const [res, err] = await $fetch(`/recSubject/subset_contents?subset_id=${sublibId}&page_size=10&page_num=1`, {
method: 'GET'
})
if (err !== null) return
setBookInfoLoading(false)
setBookInfo(res.data)
} else if (bookRadioBox.includes('2')) {
const [res, err] = await $fetch(`/recSubject/whiteBooks?subset_bw_id=${formData.whitelist}&page_size=10&page_num=1`, {
method: 'GET'
})
if (err !== null) return
setBookInfoLoading(false)
setBookInfo(res.data)
} else if (bookRadioBox.includes('3')) {
const [res, err] = await $fetch(`/recSubject/blackBooks?subset_bw_id=${formData.whitelist}&page_size=10&page_num=1`, {
method: 'GET'
})
if (err !== null) return
setBookInfoLoading(false)
setBookInfo(res.data)
}
修改后：
let url
if (bookRadioBox.includes('1')) {
url = `/recSubject/subset_contents?subset_id=${sublibId}&page_size=10&page_num=1`
} else if (bookRadioBox.includes('2')) {
url = `/recSubject/whiteBooks?subset_bw_id=${formData.whitelist}&page_size=10&page_num=1`
} else if (bookRadioBox.includes('3')) {
url = `/recSubject/blackBooks?subset_bw_id=${formData.whitelist}&page_size=10&page_num=1`
}
const [res, err] = await $fetch(url, { method: 'GET' })
if (err !== null) return
setBookInfoLoading(false)
setBookInfo(res.data)
9、表单字段不能空，需要区分类型
不能单纯利用 str.length > 0 判断字段，因为可能是 number。可以统一成 String(str).length > 0
中台开发体会
接口评审需要注意的事项
Select数据源，希望返回{label: xx, value: xx}的格式不足
mock正常，服务自测也正常，但是中台服务挂了，这种就会浪费时间找问题。代码问题
1、只有两种条件的时候，第二个返回不需要
else：修改前：
修改后：
2、arr.length === 0
修改前：
修改后：
3、重置数组对象不需要
[].concat(arr)直接利用扩展运算符就好了
修改前：
修改后：
4、利用空值合并操作符
??代替||和 三目运算符代替
||:||就有问题了，'' || 1的结果是 10，0 || '暂无金额'的结果是暂无金额修改前：
修改后:
代替
?...::修改前：
修改后:
5、利用三目运算符
? :取代if...else可以让代码更加简洁
修改前：
修改后：
6、将通用事件放到
catch的then后面做可能有些人不知道
catch后面返回的还是一个promise修改前：
修改后：
7、减少无意义的代码
有时候，我们会写出一些冗余代码（当然，有时候适当冗余是好的）
修改前：
修改后：
修改前：
修改后：
8、提取通用逻辑
下面的代码是分别点击黑白名单的时候展示对应的数据，代码基本上都是通用的：
修改前：
修改后：
9、表单字段不能空，需要区分类型
不能单纯利用
str.length > 0判断字段，因为可能是number。可以统一成String(str).length > 0