关于ajax错误处理

Question

代码如下，其中有三个if判断，来检查数据是否符合预期，让我困惑的是，这些检查是否有必要？
我是不是应该拿掉这些判断，让其catch自行捕获？
哪种方式更合理些？或许还有更合理的做法？
希望有人能够指点下，谢谢

  async loadUserInfo() {
    try {
      const { data } = await getUserInfo()
      if (data.status !== CONFIG.SUCCESS_CODE) {
        return
      }
      if (!data.data.length) {
        return 
      }
      const account = util.getAccountById(data.data)
      if (!account || !account.userName || !account.userPhoneNo || !account.merchantName) {
        return
      }
      this.setState({
        userName: account.userName,
        userPhoneNo: account.userPhoneNo,
        merchantName: account.merchantName,
      })
    } catch (err) {
      alert('用户信息数据发生错误')
    }
  }

去掉检查

  async loadUserInfo() {
    try {
      const { data } = await getUserInfo()
      const account = util.getAccountById(data.data)
      this.setState({
        userName: account.userName,
        userPhoneNo: account.userPhoneNo,
        merchantName: account.merchantName,
      })
    } catch (err) {
      alert('用户信息数据发生错误')
    }
  }

Answer 1

account如果不是空呢(null||undefined)？

上面和下面实现的功能不一样。下面只能说account没值，然后报错。但是当userName是空串的时候，无法做出应对。
Uncaught TypeError: Cannot read property 'userName' of undefined
Uncaught TypeError: Cannot read property 'userName' of null

Answer 2

与 @linong 的看法不同
我觉得只需要下面的 ajax 请求即可;
如果 account 不是空,而是 <object>{},
那么足以说明 ajax 请求是正常的,不正常的是服务器的数据
这时候也不用报错, 可以在使用 userName, userPhoneNo, merchantName 数据时加上配置

姓名: {this.state.userName || '用户名为空'}
// userPhoneNo,merchantName略

补充

this.setState({
        userName: account.userName || '默认值',
        userPhoneNo: account.userPhoneNo || '默认值',
        merchantName: account.merchantName || '默认值',
})

也可以如此吧,看使用场景

Answer 3

容错处理 是开发过程中的非常重要的一部分。

上面的空 return ，并无法准确反馈出出具体是那一部分出了问题。

严格的说，你应该在 getUserInfo 中就对可能出现的错误进行处。
如果你业务的也允许你进行一些空处理，那你可以在getUserInfo 中返回一个默认值的对象，如果不允许，那就应该抛出异常，让调用它的地方来进行异常处理。

util.getAccountById() 同上。

姓名: {this.state.userName || '用户名为空'}

这样的用法，会造成代码冗余，以及不易维护。