您当前的位置：首页 > 电脑百科 > 程序开发 > 前端

vue阻止重复请求（一般人不会，速度收藏）

时间：2023-11-11 14:22:25 来源：今日头条作者：前端面试

+ 加入收藏

概述

属于专栏-项目难点
重要程度:★★★★☆

背景

项目当中前端代码会遇到同一个请求向服务器发了多次的情况,我们要避免服务器资源浪费,同一个请求一定时间只允许发一次请求

思路

(1)如果业务简单,例如同一个按钮防止多次点击,我们可以用定时器做防抖处理 (2)如果业务复杂,例如多个组件通过代码,同一个请求发多次,这个时候防抖已经不好处理了,最好是对重复的ajax请求统一做取消操作

实现

方式1-通过定时器做防抖处理

(a)概述

效果:当用户连续点击多次同一个按钮,最后一次点击之后,过小段时间后才发起一次请求原理:每次调用方法后都产生一个定时器,定时器结束以后再发请求,如果重复调用方法,就取消当前的定时器,创建新的定时器,等结束后再发请求,工作当中可以用第三方封装的工具函数例如lodash的debounce方法来简化防抖的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/4.17.21/lodash.min.js" type="Application/JAVAscript"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/JavaScript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axIOS/0.26.0/axios.min.js" type="application/javascript"></script>
</head>
<body>
    <div id="app">
        <button @click="onClick">请求</button>
    </div>
</body>
<script>
// 定义请求接口
function sendPost(data){
    return axios({
        url: 'https://nodejs-cloud-studio-demo-bkzxs.nodejs-cloud-studio-demo.50185620.cn-hangzhou.fc.devsapp.NET/test',
        method: 'post',
        data
    })
}
new Vue({
    el: '#app',
    methods: {
        // 调用lodash的防抖方法debounce,实现连续点击按钮多次,0.3秒后调用1次接口
        onClick: _.debounce(async function(){
            let res = awAIt sendPost({username:'zs', age: 20})
            console.log('请求的结果', res.data)
        }, 300),
    },
})
</script>
</html>

(c)预览

连接

(d)存在的问题

无法解决多个按钮件的重复请求的发送问题,例如下面两种情况

情况-在点击事件上做防抖

按钮事件间是相互独立的,调用的是不同方法,做不到按钮间防抖效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/4.17.21/lodash.min.js" type="application/javascript"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js" type="application/javascript"></script>
</head>
<body>
    <div id="app">
        <button @click="onClick1" ref="btn1">请求1</button>
        <button @click="onClick2" ref="btn2">请求2</button>
    </div>
</body>
<script>
  
let sendPost = function(data){
    return axios({
        url: 'http://nodejs-cloud-studio-demo-bkzxs.nodejs-cloud-studio-demo.50185620.cn-hangzhou.fc.devsapp.net/test',
        method: 'post',
        data
    })
}
new Vue({
    el: '#app',
    mounted() {
        this.$refs.btn1.click()
        this.$refs.btn2.click()
    },
    methods: {
        // 使用lodash对请求方法做防抖
        //这里有问题,只是对每个按钮的点击事件单独做了防抖,但是两个按钮之间做不到防抖的效果
        onClick1: _.debounce(async function(){
            let res = await sendPost({username:'zs', age: 20})
            console.log('请求1的结果', res.data)
        }, 300),
        onClick2: _.debounce(async function(){
            let res = await sendPost({username:'zs', age: 20})
            console.log('请求2的结果', res.data)
        }, 300),
    },
})
</script>
</html>

情况2-在接口方法做防抖

按钮间调用的方法是相同的,是可以对方法做防抖处理,但是处理本身对方法做了一次封装,会影响到之前方法的返回值接收,需要对之前的方法做更多处理,变得更加复杂,不推荐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/4.17.21/lodash.min.js" type="application/javascript"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js" type="application/javascript"></script>
</head>
<body>
    <div id="app">
        <button @click="onClick1" ref="btn1">请求1</button>
        <button @click="onClick2" ref="btn2">请求2</button>
    </div>
</body>
<script>
// 使用lodash对请求方法做防抖,    
let sendPost = _.debounce(function(data){
    //这里有问题,这里的返回值不能作为sendPost方法执行的返回值,因为debounce内部包裹了一层
    return axios({
        url: 'http://nodejs-cloud-studio-demo-bkzxs.nodejs-cloud-studio-demo.50185620.cn-hangzhou.fc.devsapp.net/test',
        method: 'post',
        data
    })
}, 300)
new Vue({
    el: '#app',
    mounted() {
        this.$refs.btn1.click()
        this.$refs.btn2.click()
    },
    methods: {
        onClick1: async function(){
            //这里有问题,sendPost返回值不是promise,而是undefined
            let res = await sendPost({username:'zs', age: 20})
            console.log('请求1的结果', res)
        },
        onClick2: async function(){
            let res = await sendPost({username:'zs', age: 20})
            console.log('请求2的结果', res)
        },
    },
})
</script>
</html>

方式2-通过取消ajax请求

(a) 概述

直接对请求方法做处理,通过ajax库的api方法把重复的请求给取消掉

(b)原理

原生ajax取消请求

通过调用XMLHttpRequest对象实例的abort方法把请求给取消掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
<script>
//原生ajax的语法    
let xhr = new XMLHttpRequest();
xhr.open("GET", "http://nodejs-cloud-studio-demo-bkzxs.nodejs-cloud-studio-demo.50185620.cn-hangzhou.fc.devsapp.net/test?username=zs&age=20", true);
xhr.onload = function(){
    console.log(xhr.responseText)
}
xhr.send();
//在谷歌浏览器的低速3g下面测试
//通过XMLHttpRequest实例的abort方法取消请求
setTimeout(() => xhr.abort(), 100);
</script>
</html>

axios取消请求

通过axios的CancelToken对象实例cancel方法把请求给取消掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js" type="application/javascript"></script>
</head>
<body>
</body>
<script>
/*axios的取消的语法*/
// 方式1-通过axios.CancelToken.source产生cancelToken和cancel方法
/*
const source =  axios.CancelToken.source();
axios.get('http://nodejs-cloud-studio-demo-bkzxs.nodejs-cloud-studio-demo.50185620.cn-hangzhou.fc.devsapp.net/test', {
    params: {username: 'zs', age: 20}, 
    cancelToken: source.token
}).then(res=>{
    console.log('res', res.data)
}).catch(err=>{
    console.log('err', err)
})
//在谷歌浏览器的低速3g下面测试
//通过调用source的cancel方法取消
setTimeout(() => source.cancel(), 100);
*/

/**/
// 方式2-通过new axios.CancelToken产生cancelToken和cancel方法
let cancelFn 
const cancelToken =  new axios.CancelToken(cancel=>{
    cancelFn = cancel
});
axios.get('http://nodejs-cloud-studio-demo-bkzxs.nodejs-cloud-studio-demo.50185620.cn-hangzhou.fc.devsapp.net/test', {
    params: {username: 'zs', age: 20}, 
    cancelToken: cancelToken
}).then(res=>{
    console.log('res', res.data)
}).catch(err=>{
    console.log('err', err)
})
//在谷歌浏览器的低速3g下面测试
//通过调用cancelFn方法取消
setTimeout(() => cancelFn(), 100);

</script>
</html>

(c)代码

步骤1-通过axios请求拦截器取消重复请求

通过axios请求拦截器,在每次请求前把请求信息和请求的取消方法放到一个map对象当中,并且判断map对象当中是否已经存在该请求信息的请求,如果存在取消上传请求

流程图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js" type="application/javascript"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qs/6.10.3/qs.js" type="application/javascript"></script>

</head>
<body>
    <div id="app">
        <button @click="onClick1" ref="btn1">请求1</button>
        <button @click="onClick2" ref="btn2">请求2</button>
    </div>
</body>
<script>
//存储请求信息和取消方法的的map对象    
const pendingRequest = new Map();  
//根据请求的信息(请求方式,url,请求get/post数据),产生map的key
function getRequestKey(config){
    const { method, url, params, data } = config;
    return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&");
}   
//请求拦截器
axios.interceptors.request.use(
    function (config) {
    //根据请求的信息(请求方式,url,请求get/post数据),产生map的key
    let requestKey = getRequestKey(config)
    //判断请求是否重复
    if(pendingRequest.has(requestKey)){
        //取消上次请求
        let cancel = pendingRequest.get(requestKey)
        cancel()
        //删除请求信息
        pendingRequest.delete(requestKey) 
    }
    //把请求信息,添加请求到map当中
    // 生成取消方法
    config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
        // 把取消方法添加到map
        if (!pendingRequest.has(requestKey)) {
            pendingRequest.set(requestKey, cancel)
        }
    })
    return config;
  },
  (error) => {
     return Promise.reject(error);
  }
);
let sendPost = function(data){
    return axios({
        url: 'http://nodejs-cloud-studio-demo-bkzxs.nodejs-cloud-studio-demo.50185620.cn-hangzhou.fc.devsapp.net/test',
        method: 'post',
        data
    })
}
new Vue({
    el: '#app',
    mounted() {
        this.$refs.btn1.click()
        this.$refs.btn2.click()
    },
    methods: {
        // 使用lodash对请求方法做防抖
        //这里有问题,只是对每个按钮的点击事件单独做了防抖,但是两个按钮之间做不到防抖的效果
        onClick1: async function(){
            let res = await sendPost({username:'zs', age: 20})
            console.log('请求1的结果', res.data)
        },
        onClick2: async function(){
            let res = await sendPost({username:'zs', age: 20})
            console.log('请求2的结果', res.data)
        },
    },
})
</script>
</html>

步骤2-通过axios响应拦截器处理请求成功

通过axios的响应拦截器,在请求成功后在map对象当中,删除该请求信息的数据

流程图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js" type="application/javascript"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qs/6.10.3/qs.js" type="application/javascript"></script>

</head>
<body>
    <div id="app">
        <button @click="onClick1" ref="btn1">请求1</button>
        <button @click="onClick2" ref="btn2">请求2</button>
    </div>
</body>
<script>
//存储请求信息和取消方法的的map对象    
const pendingRequest = new Map();  
//根据请求的信息(请求方式,url,请求get/post数据),产生map的key
function getRequestKey(config){
    const { method, url, params, data } = config;
    return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&");
}   
//请求拦截器
axios.interceptors.request.use(
    function (config) {
    //根据请求的信息(请求方式,url,请求get/post数据),产生map的key
    let requestKey = getRequestKey(config)
    //判断请求是否重复
    if(pendingRequest.has(requestKey)){
        //取消上次请求
        let cancel = pendingRequest.get(requestKey)
        cancel()
        //删除请求信息
        pendingRequest.delete(requestKey) 
    }
    //把请求信息,添加请求到map当中
    // 生成取消方法
    config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
        // 把取消方法添加到map
        if (!pendingRequest.has(requestKey)) {
            pendingRequest.set(requestKey, cancel)
        }
    })
    return config;
  },
  (error) => {
     return Promise.reject(error);
  }
);

//响应拦截器
axios.interceptors.response.use(
  (response) => {
        //请求成功
        //删除请求的信息
        let requestKey = getRequestKey(response.config)
        if(pendingRequest.has(requestKey)){
            pendingRequest.delete(requestKey)   
        }
        return response;
   },
   (error) => {
        return Promise.reject(error);
   }
);
let sendPost = function(data){
    return axios({
        url: 'http://nodejs-cloud-studio-demo-bkzxs.nodejs-cloud-studio-demo.50185620.cn-hangzhou.fc.devsapp.net/test',
        method: 'post',
        data
    })
}
new Vue({
    el: '#app',
    mounted() {
        this.$refs.btn1.click()
        this.$refs.btn2.click()
    },
    methods: {
        // 使用lodash对请求方法做防抖
        //这里有问题,只是对每个按钮的点击事件单独做了防抖,但是两个按钮之间做不到防抖的效果
        onClick1: async function(){
            let res = await sendPost({username:'zs', age: 20})
            console.log('请求1的结果', res.data)
        },
        onClick2: async function(){
            let res = await sendPost({username:'zs', age: 20})
            console.log('请求2的结果', res.data)
        },
    },
})
</script>
</html>

步骤3-通过axios响应拦截器处理请求失败

通过axios的响应拦截器,在请求失败后在map对象当中,删除该请求信息的数据

流程图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js" type="application/javascript"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qs/6.10.3/qs.js" type="application/javascript"></script>

</head>
<body>
    <div id="app">
        <button @click="onClick1" ref="btn1">请求1</button>
        <button @click="onClick2" ref="btn2">请求2</button>
    </div>
</body>
<script>
//存储请求信息和取消方法的的map对象    
const pendingRequest = new Map();  
//根据请求的信息(请求方式,url,请求get/post数据),产生map的key
function getRequestKey(config){
    const { method, url, params, data } = config;
    return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&");
}   
//请求拦截器
axios.interceptors.request.use(
    function (config) {
    //根据请求的信息(请求方式,url,请求get/post数据),产生map的key
    let requestKey = getRequestKey(config)
    //判断请求是否重复
    if(pendingRequest.has(requestKey)){
        //取消上次请求
        let cancel = pendingRequest.get(requestKey)
        cancel()
        //删除请求信息
        pendingRequest.delete(requestKey) 
    }
    //把请求信息,添加请求到map当中
    // 生成取消方法
    config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
        // 把取消方法添加到map
        if (!pendingRequest.has(requestKey)) {
            pendingRequest.set(requestKey, cancel)
        }
    })
    return config;
  },
  (error) => {
     return Promise.reject(error);
  }
);
//删除请求信息
function delPendingRequest(config){
    let requestKey = getRequestKey(config)
    if(pendingRequest.has(requestKey)){
        pendingRequest.delete(requestKey)   
    } 
}
//响应拦截器
axios.interceptors.response.use(
  (response) => {
        //请求成功
        //删除请求的信息
        delPendingRequest(response.config)
        return response;
   },
   (error) => {
        //请求失败
        //不是取消请求的错误
        if (!axios.isCancel(error)){
            //服务器报400,500报错,删除请求信息
            delPendingRequest(error.config || {})
        } 
        return Promise.reject(error);
   }
);
let sendPost = function(data){
    return axios({
        url: 'http://nodejs-cloud-studio-demo-bkzxs.nodejs-cloud-studio-demo.50185620.cn-hangzhou.fc.devsapp.net/test',
        method: 'post',
        data
    })
}
new Vue({
    el: '#app',
    mounted() {
        this.$refs.btn1.click()
        this.$refs.btn2.click()
    },
    methods: {
        // 使用lodash对请求方法做防抖
        //这里有问题,只是对每个按钮的点击事件单独做了防抖,但是两个按钮之间做不到防抖的效果
        onClick1: async function(){
            let res = await sendPost({username:'zs', age: 20})
            console.log('请求1的结果', res.data)
        },
        onClick2: async function(){
            let res = await sendPost({username:'zs', age: 20})
            console.log('请求2的结果', res.data)
        },
    },
})
</script>
</html>

(d)存在的问题

通过取消ajax请求的方式,虽然避免重复请求,但是多个请求只有最后一次请求获取数据成功,其他请求会产生报错,没办法实现多个请求都获取同一个请求结果,会影响接下来代码正常执行

方式3-通过缓存ajax结果

(a)概述

直接对请求方法做处理,通过ajax库的api方法在请求之前先访问缓存列表,如果有结果那么从缓存当中获取结果,如果没有再向服务器索要数据

(b)代码

步骤1-通过axios请求拦截器,设置config.adapter自定义处理请求

设置config.adapter后,请求会被拦截,不会再向服务器发请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js" type="application/javascript"></script>
</head>
<body>
</body>
<script>
let sendPost = function(data){
    return axios({
        url: 'http://nodejs-cloud-studio-demo-bkzxs.nodejs-cloud-studio-demo.50185620.cn-hangzhou.fc.devsapp.net/test',
        method: 'post',
        data
    })
}
axios.interceptors.request.use(async function (config) {
    // 通过,config.adapter,允许自定义处理请求
    config.adapter = function (config) {
        return new Promise((resolve) => {
          const res = {
            data: 'hello',
            status: 200,
            statusText: 'OK',
            headers: { 'content-type': 'text/plain; charset=utf-8' },
            config,
            request: {}
          }
          return resolve(res)
        })
    }
    return config
})
;(function(){
    sendPost({username:'zs', age: 20}).then(res=>{
        console.log('res1',res.data)
    })
    sendPost({username:'zs', age: 20}).then(res=>{
        console.log('res2',res.data)
    })
})();
</script>
</html>

步骤2-定义缓存对象,在请求和响应拦截器使用缓存

定义缓存对象,提供查询和添加的方法,并且缓存需要设置大小和超时时间

流程图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js" type="application/javascript"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qs/6.10.3/qs.js" type="application/javascript"></script>
</head>
<body>
    <div id="app">
        <button @click="onClick1" ref="btn1">请求1</button>
        <button @click="onClick2" ref="btn2">请求2</button>
    </div>
</body>
<script>
// 缓存对象
let cache = {
    // 缓存列表
    list: [],
    // 最大缓存数
    MAX_NUM: 100,
    // 最大缓存时间
    EXPIRED_TIME: 60000,
    // 根据请求的信息(请求方式,url,请求get/post数据),产生map的key
    getRequestKey(config){
        const { method, url, params, data } = config;
        return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&");
    },
    // 添加缓存结果
    add({config, data}){
        if(config.data) config.data = JSON.parse(config.data)
        let key = this.getRequestKey(config)
        let i = this.list.findIndex(t=>t.key === key)
        if(i>-1){
            // 保存请求结果
            this.list[i].data = data
            // 把结果给接口
            this.list[i].resolve(data)
        }else{
            // 添加到缓存列表中
            this.list.push({ time: Date.now(), key, data })
        }
    },
    // 查找缓存结果
    find(config){
        // 根据请求信息生成key
        let key = this.getRequestKey(config)
        let i = this.list.findIndex(t=>  t.key === key)
        // 判断缓存当中是否有该请求结果
        if(i>-1){
            let f = this.list[i]
            // 判断是否超出了最大缓存时间
            if(Date.now() - f.time > this.EXPIRED_TIME){
                // 清除该缓存
                this.list.splice(i, 1)
            }else{
                // 返回缓存
                return f
            }
        }
        // 添加缓存信息
        let t = {key, time: Date.now()}
        t.data = new Promise((resolve)=>{
            t.resolve = resolve
        })
        // 判断是否超出了最大缓存数量
        if(this.list.length === this.MAX_NUM){
            this.list.shift()
        }
        this.list.push(t)
        // 返回undefined,让请求拦截不执行config.adapter
        return undefined
    }
}   

let sendPost = function(data){
    return axios({
        url: 'http://nodejs-cloud-studio-demo-bkzxs.nodejs-cloud-studio-demo.50185620.cn-hangzhou.fc.devsapp.net/test',
        method: 'post',
        data
    })
}
axios.interceptors.request.use(async function (config) {
    let f =  cache.find(config)
    // 查看缓存当中有没有
    if(f){
        // 通过config.adapter,允许自定义处理请求
        config.adapter = function (config) {
            return new Promise((resolve) => {
                const res = {
                    status: 200,
                    statusText: 'OK',
                    headers: { 'content-type': 'application/json; charset=utf-8' },
                    config,
                    request: {}
                }
                // 判断缓存当中data是否是Promise?
                //   如果是,代表数据正在获取中
                //   如果不是代表请求已经获取过
                if(f.data instanceof Promise){
                    f.data.then(data=>{
                        resolve({ ...res, data })
                    })
                }else{
                    resolve({ ...res, data: f.data })
                }
            })
        }
    }
    return config
})
axios.interceptors.response.use(
  (response) => {
        //请求成功
        //缓存结果到缓存中
        cache.add(response)
        return response;
   }
);

new Vue({
    el: '#app',
    mounted() {
        this.$refs.btn1.click()
        this.$refs.btn2.click()
    },
    methods: {
        // 使用lodash对请求方法做防抖
        //这里有问题,只是对每个按钮的点击事件单独做了防抖,但是两个按钮之间做不到防抖的效果
        onClick1: async function(){
            let res = await sendPost({username:'zs', age: 20})
            console.log('请求1的结果', res.data)
        },
        onClick2: async function(){
            let res = await sendPost({username:'zs', age: 20})
            console.log('请求2的结果', res.data)
        },
    },
})
</script>
</html>

Tags：vue 点击:() 评论:()

声明：本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作，风险自担。如有任何标注错误或版权侵犯请与我们联系，我们将及时更正、删除。

▌相关推荐

前端开始“锈化”？Vue团队开源JS打包工具：基于Rust、速度极快、尤雨溪主导

Vue 团队已正式开源Rolldown —— 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品，它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】

2024-03-09　　Search: vue 点击:(11)　　评论:(0)　　加入收藏

SpringBoot3+Vue3 开发高并发秒杀抢购系统

开发高并发秒杀抢购系统：使用SpringBoot3+Vue3的实践之旅随着互联网技术的发展，电商行业对秒杀抢购系统的需求越来越高。为了满足这种高并发、高流量的场景，我们决定使用Spring...【详细内容】

2024-01-14　　Search: vue 点击:(90)　　评论:(0)　　加入收藏

React与Vue性能对比：两大前端框架的性能

React和Vue是当今最流行的两个前端框架，它们在性能方面都有着出色的表现。React的加载速度：初次加载：由于React使用了虚拟DOM（Virtual DOM）技术，它可以通过比较虚拟DOM树与实际DOM...【详细内容】

2024-01-05　　Search: vue 点击:(106)　　评论:(0)　　加入收藏

Vue中Scope是怎么做样式隔离的？

scope样式隔离在 Vue 中，样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时，Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性，以...【详细内容】

2024-01-04　　Search: vue 点击:(80)　　评论:(0)　　加入收藏

vue3中 ref和 reactive的区别？

最近有朋友在面试过程中经常被问到这么一个问题，vue3 中的ref 和 reactive的区别在哪里，为什么要定义两个API 一个 api不能实现响应式更新吗？？带着这个疑问，我们接下来进行逐...【详细内容】

2024-01-03　　Search: vue 点击:(36)　　评论:(0)　　加入收藏

React18 与 Vue3 全方面对比

1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大；Vue 语法多，难度小例如指令：Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】

2024-01-03　　Search: vue 点击:(72)　　评论:(0)　　加入收藏

Vue中虚拟Dom技术，你学会了吗？

在Vue中，虚拟DOM（Virtual DOM）是一项关键的技术，它是一种用JavaScript对象模拟真实DOM结构的机制。虚拟DOM的引入旨在提高DOM操作的效率，特别是在频繁的数据变化时。1. 为什么需...【详细内容】

2023-12-26　　Search: vue 点击:(65)　　评论:(0)　　加入收藏

七个常用的 Vue 3 UI 组件

介绍：由于我在工作的公司中角色和职责的变化，作为后端开发人员的我在去年年底选择了 Vue.js。当我深入研究时，我发现 Vue.js 非常有趣。它不像 Angular 那样有很高的学习曲线，而...【详细内容】

2023-12-20　　Search: vue 点击:(78)　　评论:(0)　　加入收藏

Vue3 学习笔记，如何使用 Watch 监听数据变化

大家好，本篇文章我们继续学习和 Vue 相关的内容，今天我们归纳总结下如何使用 watch 监听组件中的数据变化，以及 computed 和 watch 的区别。什么是 watch，以及如何使用？watch 是...【详细内容】

2023-12-14　　Search: vue 点击:(163)　　评论:(0)　　加入收藏

Vue3 学习笔记，如何理解 Computed 计算属性

大家好，本篇文章我们继续学习和 Vue 相关的内容，今天我们归纳总结下什么是 computed 计算属性、如何使用和应用场景，以及 computed 和 Method 事件的区别和应用场景。什么是 co...【详细内容】

2023-12-11　　Search: vue 点击:(199)　　评论:(0)　　加入收藏

▌简易百科推荐

20k级别前端是怎么使用LocalStorage的，想知道吗？

当咱们把咱们想缓存的东西，存在localStorage、sessionStorage中，在开发过程中，确实有利于咱们的开发，咱们想看的时候也是一目了然，点击Application就可以看到。前言大家好，我是林...【详细内容】

2024-03-26　　前端之神　　微信公众号　　Tags:前端　点击:(10)　　评论:(0)　　加入收藏

前端不存在了？盲测64%的人更喜欢GPT-4V的设计，杨笛一等团队新作

3 月 9 日央视的一档节目上，百度创始人、董事长兼 CEO 李彦宏指出，以后不会存在「程序员」这种职业了，因为只要会说话，人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】

2024-03-11　　机器之心Pro　　　　Tags:前端　点击:(9)　　评论:(0)　　加入收藏

前端开始“锈化”？Vue团队开源JS打包工具：基于Rust、速度极快、尤雨溪主导

2024-03-09　　OSC开源社区　　　　Tags:Vue 　点击:(11)　　评论:(0)　　加入收藏

两年前端经验还不会手写Promise？

什么是promise？当我们处理异步操作时，我们经常需要进行一系列的操作，如请求数据、处理数据、渲染UI等。在过去，这些操作通常通过回调函数来处理，但是回调函数嵌套过多会导致代码...【详细内容】

2024-03-07　　海燕技术栈　　微信公众号　　Tags:Promise 　点击:(23)　　评论:(0)　　加入收藏

网站开发中的前端和后端开发有什么区别

前端开发和后端开发都是干什么的？有哪些区别？通俗地讲，前端干的工作是用户可以直接看得见的，而后端开发的工作主要在服务端，用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】

2024-02-21　　CarryData　　　　Tags:前端　点击:(31)　　评论:(0)　　加入收藏

网站程序开发中的前后端分离技术

随着互联网的快速发展和技术的不断创新，传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性，前后端分离技术逐渐成为了网站...【详细内容】

2024-01-31　　网站建设派迪星航　　　　Tags:前后端分离　点击:(23)　　评论:(0)　　加入收藏

如何优雅的实现前端国际化？

JavaScript 中每个常见问题都有许多成熟的解决方案。当然，国际化 (i18n) 也不例外，有很多成熟的 JavaScript i18n 库可供选择，下面就来分享一些热门的前端国际化库！i18nexti18ne...【详细内容】

2024-01-17　　前端充电宝　　微信公众号　　Tags:前端　点击:(67)　　评论:(0)　　加入收藏

Vue中Scope是怎么做样式隔离的？

2024-01-04　　海燕技术栈　　微信公众号　　Tags:Vue 　点击:(80)　　评论:(0)　　加入收藏

vue3中 ref和 reactive的区别？

2024-01-03　　互联网高级架构师　　今日头条　　Tags:vue3 　点击:(36)　　评论:(0)　　加入收藏

React18 与 Vue3 全方面对比

2024-01-03　　爱做梦的程序员　　今日头条　　Tags:Vue3 　点击:(72)　　评论:(0)　　加入收藏

推荐资讯

访问网站显示不安全是	掌握独立站SEO策略，提
快手蓝色小钥匙跳转微	微信朋友圈如何置顶
Facebook新用户扩展怎	详解微信里面的分期可
微信表情包更新：原创设	微信朋友圈功能大改版