Vue优化之优雅的抛出错误（Error）

最新推荐文章于 2024-07-11 12:35:27 发布

勇敢小陈

最新推荐文章于 2024-07-11 12:35:27 发布

阅读量3.8k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ct5211314/article/details/125855165

版权

在开发工程中，往往有些地方需要我们进行错误的抛出，例如：props传递一个参数，我不知道他传递的是啥，而我知道我需要啥，所以我们可以在props中通过检验方法进行错误的抛出，但可能抛出的问题不够直观所以导致排除困难，这个时候手动定义一个异常错误抛出是明智的选择。

例如：

父组件：

<template>
  <div>
    <hello-world :name="name" :age="age"></hello-world>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data(){
    return {
      name:'小陈',
      age:18
    }
  }
}
</script>

<style>

</style>

子组件：

<template>
  <div>{{name}}{{age}}</div>
</template>

<script>
export default {
props:{
  "name": {
		type: String,
		default:  'text',
		validator(value) {
     return ['小陈1', 'number','letter'].indexOf(value) > -1
		}
 	},
  age:Number
},
methods:{
  aa(){
    return new Error('5555')
  }
}
}
</script>

<style>

</style>

报错：

虽然报错了，也知道校验失败，但排查起来不一定容易，我知道错了，但我应该给你什么呢？

这个时候我们就可以通过抛出错误来解决

通过throw new Error进行报错处理或通过console.error()进行报错处理都可以

<template>
  <div>{{name}}{{age}}</div>
</template>

<script>
export default {
props:{
  "name": {
		type: String,
		default:  'text',
		validator(value) {
      if(!['小陈1', 'number','letter'].indexOf(value) > -1){
       throw  new Error(`${value}不属于'小陈1', 'number','letter'中的任意值`)
      }
			 
		}
 	},
  age:Number
},
methods:{
  aa(){
    return new Error('5555')
  }
}
}
</script>

<style>

</style>