vue 中使用 axios 实现防抖功能

利用axios中的 cancelToken实现防抖功能<template><input type="text" v-model="val"><template><script>import axios from "axios";export default {name: 'hello',data()...

xueer43

2112人浏览 · 2020-03-23 15:01:07

xueer43 · 2020-03-23 15:01:07 发布

利用axios中的 cancelToken实现防抖功能

<template>
   <input type="text" v-model="val">
<template>
 
<script>
import axios from "axios";
export default {
    name: 'hello',
    data() {
        return{
            val: '',
            canMsg: '请求终止',
    },
    methods: {
         cancelReq() {
            if (typeof this.source === 'function') {
                this.source(canMsg)；
            }
        }
    },
    watch: {
        val(newVal) {          
            var that = this;
            this.cancelReq();
             
            axios.get('xxx', {             
                cancelToken: new axios.CancelToken(function(c) {
                    that.source = c;
                })
            }).then((res) => {
                ...
            }).catch((err) => {
                if (axios.isCancel(err)) {
                    // 返回取消请求信息
                    console.log('Rquest canceled', err.message);
                } else {
                    console.log(err);
                }
            })       
        }
    }
}
</script>

引自：https://segmentfault.com/a/1190000016963943