vue中promise all的在methods方法中的使用

2 篇文章 0 订阅
1 篇文章 0 订阅

下面直接上 代码

methods:{
	geta(){
	     return new Promise((resolve, reject) => {
              axios.post(url)
              .then(response => {
                resolve(response)
              })
              .catch(error => {
               reject(err)
              });
        });
	},
	getb(){
	     return new Promise((resolve, reject) => {
              axios.post(url)
              .then(response => {
                resolve(response)
              })
              .catch(error => {
               reject(err)
              });
        });
	},
	getAll(){
	 // 调用Promise.all().then(res=>{})
	  Promise.all([this.geta(), this.getb()]).then((res) => {
	  		console.log(res)  //[{},{}]
           }).catch(err => {
      });
	}
}

Vue ,可以使用表单校验库如 VeeValidate 或 ElementUI 的表单校验功能来实现表单校验。这些库的使用方式类似,下面以 VeeValidate 为例: 1. 安装 VeeValidate ```bash npm install vee-validate --save ``` 2. 在 main.js 引入 VeeValidate 并注册全局组件 ```javascript import Vue from 'vue' import VeeValidate from 'vee-validate' Vue.use(VeeValidate) ``` 3. 在需要校验的表单组件使用 `v-validate` 指令来标记需要校验的表单元素,并设置校验规则 ```html <template> <form> <div> <label for="name">姓名:</label> <input id="name" name="name" v-validate="'required|max:10'" :class="{'is-invalid': errors.has('name')}" /> <span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span> </div> <button type="submit" @click.prevent="submitForm">提交</button> </form> </template> <script> export default { methods: { submitForm() { this.$validator.validate().then(result => { if (result) { // 校验通过,提交表单逻辑 } else { // 校验不通过,提示用户 } }) } } } </script> <style> .is-invalid { border-color: red; } .error { color: red; } </style> ``` 以上代码,`v-validate="'required|max:10'"` 指定了校验规则,表示该输入框必填且最多输入 10 个字符。`errors.has('name')` 和 `errors.first('name')` 分别用来判断该输入框是否有校验错误和获取第一个校验错误信息。`this.$validator.validate()` 用来触发表单校验,返回一个 Promise,用来判断校验结果。 在遍历使用表单校验时,可以将校验规则和错误信息定义在数据,然后在遍历动态生成表单元素和校验规则。例如: ```html <template> <form> <div v-for="(field, index) in fields" :key="index"> <label :for="field.name">{{ field.label }}:</label> <input :id="field.name" :name="field.name" v-model="form[field.name]" v-validate="field.rule" :class="{'is-invalid': errors.has(field.name)}" /> <span v-show="errors.has(field.name)" class="error">{{ errors.first(field.name) }}</span> </div> <button type="submit" @click.prevent="submitForm">提交</button> </form> </template> <script> export default { data() { return { form: { name: '', age: '', email: '' }, fields: [ { name: 'name', label: '姓名', rule: 'required|max:10' }, { name: 'age', label: '年龄', rule: 'required|integer|min:0|max:150' }, { name: 'email', label: '邮箱', rule: 'required|email' } ] } }, methods: { submitForm() { this.$validator.validateAll().then(result => { if (result) { // 校验通过,提交表单逻辑 } else { // 校验不通过,提示用户 } }) } } } </script> <style> .is-invalid { border-color: red; } .error { color: red; } </style> ``` 以上代码,`fields` 数组用来定义表单元素的名称、标签和校验规则。在遍历,根据 `fields` 数组动态生成表单元素和校验规则,使用 `v-validate="field.rule"` 来绑定校验规则。`this.$validator.validateAll()` 用来触发表单校验,返回一个 Promise,用来判断校验结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值