前端解决后端接口返回数组类型数据为空的报错

简介: 前端解决后端接口返回数组类型数据为空的报错

问题:

开发过程中,我们可能会取接口返回的数组数据的第一项,进行页面渲染。当某一用户的该数据为空时,就会出现未定义的报错。

如下:

2020062310470442.png

<script>
export default {
  data() {
    return {
      dealItem:{}
    };
  },
  methods:{
    getPersonInfo(){
      this.sendRequest({ // 获取待办数据
        url : `flow/act/flowTask/qureyHandleTasks`,
        method : "GET",
        data : {
          userId:userId,
          taskName:'入库',
          processDefinitionId:'sample:1:35016'
        },
        hideLoading : true,
        success: (res) => {
          if(res.code === 0){
            this.dealItem = res.data.datas[0]
            this.judgeState()
          }
        }
      })
    },
    judgeState(){
      if(this.dealItem.progress === 100){
        this.state = true
        this.dealItem.stateContent = '已通过'
      }else{
        this.state = false
        this.dealItem.stateContent = '待通过'
      }
    }
  },
  beforeMount(){
    this.getPersonInfo()
  }
}
</script>

报错:

2020062310470442.png

解决:
1.给定默认值;
2.判断是否为空,为空时使用给定的默认值;

<script>
export default {
  data() {
    return {
      dealItem:{
        sampleName: "无待办",
        stateContent: "无待办",
        progress:100,
        taskName: "无待办"
      }
    };
  },
  methods:{
    getPersonInfo(){
      this.sendRequest({ // 获取待办数据
        url : `flow/act/flowTask/qureyHandleTasks`,
        method : "GET",
        data : {
          userId:userId,
          taskName:'入库',
          processDefinitionId:'sample:1:35016'
        },
        hideLoading : true,
        success: (res) => {
          if(res.code === 0){
            if(res.data.datas.length === 0){
              return
            }else{
              this.dealItem = res.data.datas[0]
              this.judgeState()
            }
          }
        }
      })
    },
    judgeState(){
      if(this.dealItem.progress === 100){
        this.state = true
        this.dealItem.stateContent = '已通过'
      }else{
        this.state = false
        this.dealItem.stateContent = '待通过'
      }
    }
  },
  beforeMount(){
    this.getPersonInfo()
  }
}
</script>
相关文章
|
29天前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
27 0
|
7天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
24 2
|
29天前
|
JavaScript 前端开发
前端 JS 经典:JS 基础类型和 typeof
前端 JS 经典:JS 基础类型和 typeof
19 0
|
1月前
|
前端开发
前端 TS 快速入门之二:接口
前端 TS 快速入门之二:接口
25 0
|
1月前
|
缓存 JSON 安全
【Uniapp 专栏】Uniapp 与后端接口对接的实战要点
【5月更文挑战第12天】在 Uniapp 项目开发中,成功对接后端接口至关重要。要点包括:深入理解后端提供的接口文档,确保数据格式(如 JSON)正确处理,选择合适的请求方式(如 GET、POST),设置正确的请求头,做好错误处理和数据缓存策略,确保安全性(如使用 HTTPS 和令牌验证)并进行全面测试。同时,进行版本管理和团队协作,与后端开发人员保持良好沟通,以实现高效、稳定的接口对接。
|
1月前
|
前端开发 小程序 测试技术
前端后端测试接口mork神器,Apifox使用一分钟入门
前端后端测试接口mork神器,Apifox使用一分钟入门
43 0
|
1月前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 中的接口是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 中的接口是什么?
|
1月前
|
XML JSON 前端开发
获取后端接口请求中的参数(@PathVariable,@RequestParam,@RequestBody区别,使用postman请求
获取后端接口请求中的参数(@PathVariable,@RequestParam,@RequestBody区别,使用postman请求
|
1月前
|
前端开发 JavaScript 开发者
【Web 前端】数组迭代的方法有哪些?
【4月更文挑战第22天】【Web 前端】数组迭代的方法有哪些?
|
1月前
|
前端开发 JavaScript 索引
【Web 前端】数组的基本操作方法?
【4月更文挑战第22天】【Web 前端】数组的基本操作方法?