vue watch监听验证码时,axios延迟发送post请求。

标题写的全面一些,方便其他人检索,我就是找了半天找不到资料,最后自己搞定了。

原理:

每次监听到输入值变化,就打一个时间戳,然后暂停2秒再去提交post验证。

但是每次提交前,判断一下之前打的时间戳和现在时间是否大于2秒,如果大于,则真去提交post,否则return掉不执行。

以下是代码片段:

 

data () {
     return {
        captchaInputLastTime:null,
    }

watch: {
// 监听验证码变化
'formData.captcha': async function(newVal){

                var delay = 2000;//延迟2000 毫秒执行
                this.captchaInputLastTime = (new Date()).valueOf();
                await this.$root.sleep(delay);
                var nowTime = (new Date()).valueOf();
                var gap = nowTime - this.captchaInputLastTime;
                if( gap  < delay){
                    return
                }

                axios.post。。。。。执行验证逻辑。
}

methods: {
        sleep (ms = 1000) {
                return new Promise((resolve)=>setTimeout(resolve,ms));
        },
}

  

转载于:https://www.cnblogs.com/alpiny/p/10492230.html

可以通过在发送 POST 请求,在请求添加一个标记,然后在接收响应再移除这个标记。在 Vue.js ,可以使用 Axios 的拦截器来实现这个功能。 首先,在 Vue.js 引入 Axios: ```javascript import axios from 'axios'; ``` 然后,定义一个 Axios 实例: ```javascript const axiosInstance = axios.create({ baseURL: 'http://example.com/api', timeout: 5000, headers: { 'Content-Type': 'application/json' } }); ``` 接下来,在 Axios 实例添加请求拦截器: ```javascript axiosInstance.interceptors.request.use(config => { // 在请求添加一个标记 config.headers['X-Loading'] = true; return config; }, error => { return Promise.reject(error); }); ``` 在请求拦截器,可以在请求添加一个名为 X-Loading 的标记。这个标记的值可以是任意值,我们可以通过这个标记来判断是否需要显示加载动画。 接着,在 Axios 实例添加响应拦截器: ```javascript axiosInstance.interceptors.response.use(response => { // 移除请求的标记 delete response.config.headers['X-Loading']; return response; }, error => { delete error.config.headers['X-Loading']; return Promise.reject(error); }); ``` 在响应拦截器,可以移除请求的 X-Loading 标记。 最后,在 Vue.js 使用 Axios 发送 POST 请求,可以在发送请求前显示加载动画,在接收响应隐藏加载动画: ```javascript export default { data() { return { loading: false }; }, methods: { async submitForm() { try { this.loading = true; await axiosInstance.post('/login', { username: 'test', password: 'test' }); this.loading = false; } catch (error) { this.loading = false; console.log(error); } } } }; ``` 在 Vue.js 组件,可以定义一个 loading 变量来控制加载动画的显示和隐藏。在调用 Axiospost 方法,可以先将 loading 变量设置为 true,表示正在加载。在接收响应,再将 loading 变量设置为 false,表示加载完成。如果发生错误,也需要将 loading 变量设置为 false。 在模板可以使用 loading 变量来控制加载动画的显示和隐藏: ```html <template> <div> <form @submit.prevent="submitForm"> <input type="text" v-model="username" placeholder="Username"> <input type="password" v-model="password" placeholder="Password"> <button type="submit">Submit</button> </form> <div v-if="loading">Loading...</div> </div> </template> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值