编码规范之一:数据来源要统一(记一次bug引发的思考)
处理数据的来源要统一(记一次bug引起的思考)
经验教训
写代码的时候要保证前后的数据的来源一致,要不然改动代码可能引起一些低级的错误。
代码环境
Vue1.x
产品场景
用户登录之后,在主页判断用户状态,决定是否调用一次上传数据的接口。
代码简化分析
登录页面,登录成功后会本地缓存手机号、uid类似:
// login.vue
...
sessionStorage.setItem('uid', res.uid) // uid 接口返回
sessionStorage.setItem('phone', this.phone) // phone 手动输入
...
首页,获取完客户信息后,根据客户状态来判断是否调用上传数据的接口。
// index.vue
...
<script>
export default {
data () {
return {
phone: '',
source: '' // url参数上获取
}
},
methods: {
getCustomerInfo () {
axios(data).then( res => {
if (res.status === 1) { // 这个条件下调用 upload接口
this.phone = res.phone
this.uploadData()
}
})
},
uploadData () {
if (this.source === '1') {
window.clientengine1.uploadSomeData(sessionStorage.getItem('phone'))
}
if (this.source === '2') {
window.clientengine2.uploadSomeData(this.phone)
}
}
},
ready () {
this.getCustomerInfo()
}
}
</script>
...
产品需求改动
用户跳转到主页的时候,总是调用上传数据接口,不再判断状态。
失败的改法
将uploadData方法直接移动到ready方法里执行。
methods: {
getCustomerInfo () {
axios(data).then( res => {
if (res.status === 1) { // 这个条件下调用 upload接口
this.phone = res.phone
// this.uploadData()
}
})
},
uploadData () {
if (this.source === '1') {
window.clientengine1.uploadSomeData(sessionStorage.getItem('phone'))
}
if (this.source === '2') {
window.clientengine2.uploadSomeData(this.phone)
}
}
},
ready () {
this.getCustomerInfo()
this.uploadData()
}
失败现象
uploadData方法里source等于2的情况下,传递的参数为空
失败原因
uploadData这个函数调用的时候,传递的参数数据来源不一样,一个是从sessionStorage里获取的(有具体值),另一个是从接口返回的(调用的时候这个值还是空)。
成功的改法
uploadData () {
const phone = sessionStorage.getItem('phone')
if (this.source === '1') {
window.clientengine1.uploadSomeData(phone)
}
if (this.source === '2') {
window.clientengine2.uploadSomeData(phone)
}
}
总结
写代码的时候,不能仅仅保证程序能正确得运行,还得保证处理数据的时候数据的来源要统一,这样重构代码的时候不容易出现低级错误。
如果发现任何错误,请评论指正,谢谢!