编码规范之一：数据来源要统一（记一次bug引发的思考）

处理数据的来源要统一(记一次bug引起的思考)

经验教训

写代码的时候要保证前后的数据的来源一致，要不然改动代码可能引起一些低级的错误。

代码环境

Vue1.x

产品场景

用户登录之后，在主页判断用户状态，决定是否调用一次上传数据的接口。

代码简化分析

登录页面，登录成功后会本地缓存手机号、uid类似：

// login.vue
...
sessionStorage.setItem('uid', res.uid) // uid 接口返回
sessionStorage.setItem('phone', this.phone) // phone 手动输入
...

首页，获取完客户信息后，根据客户状态来判断是否调用上传数据的接口。

// index.vue
...

...

产品需求改动

用户跳转到主页的时候，总是调用上传数据接口，不再判断状态。

失败的改法

将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)
        }
      }

总结

写代码的时候，不能仅仅保证程序能正确得运行，还得保证处理数据的时候数据的来源要统一，这样重构代码的时候不容易出现低级错误。

转载于:https://www.cnblogs.com/Plortinus/p/7703930.html