Vue + Axios全局接口防抖、节流封装实现，让你前端开发更高效

最新推荐文章于 2024-09-30 19:28:09 发布
最新推荐文章于 2024-09-30 19:28:09 发布
阅读量1k 收藏 9
点赞数 7
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjxIt/article/details/140824541
版权

你是否有过这样的经历，每当你在前端开发中使用 Ajax 进行数据请求时，往往因为一些错误操作导致页面不断地发送请求，甚至导致了系统崩溃？为了解决这个问题，我们需要对接口进行防抖和节流处理。

本文将介绍如何使用 Vue 和 Axios 对接口进行防抖和节流处理，并详细介绍其实现原理以及注意事项。让我们开始吧！

什么是接口防抖和节流？

接口防抖和节流是网站性能优化方案的重要组成部分之一。简单来说，防抖是指在特定的时间内只执行一次函数，而节流是指在一个时间段内才执行一次函数。

在前端开发中，通过接口防抖和节流可以有效减少网络请求和服务端负载。通过编写防抖和节流代码的方式，可以确保前端页面不会出现过多的请求数量，从而使网页加载速度更快、响应更灵敏。

Vue + Axios 封装全局接口防抖和节流配置

在 Vue 中，可以通过创建一个全局的 axios 实例来封装接口请求。下面我们将根据需求，对 axios 实例进行编写，实现防抖和节流功能。

防抖

在实现防抖之前，我们先来介绍一下什么是“防抖”。在前端开发中，“防抖”指的是在一定时间内只能触发一次事件，通常是输入框或滚动事件。假如没有防抖控制，页面会出现一些异常情况，例如：搜索框输入过快、滚动条跳动频繁等。

实现原理

防抖的实现原理非常简单，就是通过对要执行的函数进行延迟处理，以此来控制函数执行的次数。具体流程如下：

  1. 定义一个变量用于保存计时器。

  2. 在函数执行前判断计时器是否存在，如果存在则清除计时器。

  3. 为函数设置时间延迟，将返回结果保存到计时器变量中。

  4. 等待时间超过设定的阈值后，执行相应的回调函数。

下面是防抖代码的示例：

// 防抖function debounce(fn, delay = 500) { 
      let timer = null;  
      return function(...args) {   
 if (timer !== null) {    
     clearTimeout(timer);    
     }   
      timer = setTimeout(() => {    
      fn.apply(this, args);    
      timer = null;    }, delay); 
 };
}

注意事项

在使用防抖技术的时候，需要注意以下几点：

  1. 时间延迟需要根据业务需求进行调整。

  2. 在防抖过程中，要确保函数参数传递正确。

节流

相比于防抖技术，节流技术更加灵活。在前端开发中，“节流”通常指的是在一定时间内只能执行一次事件，例如：下拉加载更多、页面滚动等。

实现原理

节流技术的实现原理也非常简单，就是通过设置一个固定时间间隔，在这个时间间隔内只能执行一次相应的回调函数。具体流程如下：

  1. 定义一个变量用于保存上一次执行函数的时间。

  2. 在执行函数前获取当前的时间戳。

  3. 判断当前时间与上一次执行时间是否大于设定的间隔时间，如果大于，则执行相应的回调函数，并更新上一次执行时间。

  4. 如果小于设定的间隔时间，则等待下一次执行。

  5. 下面是节流代码的示例：

    // 节流
function throttle(fn, delay = 500) { 
  let last = 0; 
  return function(...args) {  
  let now = new Date().getTime();  
  if (now - last > delay) {    
  last = now;      fn.apply(this, args); 
   }  
};
}

    注意事项

    在使用节流技术的时候，需要注意以下几点：时间间隔需要根据业务需求进行调整。在节流过程中，要确保函数参数传递正确。节流过程中可能会出现滞后或者丢失部分事件的问题，需要进行相应的处理。

  6. 封装axios实例

    在 Vue 中，可以通过创建一个全局的 axios 实例来封装接口请求。下面我们将根据需求，对 axios 实例进行编写，实现防抖和节流功能。

    首先，我们需要安装 axios 插件：

    npm install axios --save

    然后，在 main.js 中添加以下代码：

    import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios

    接下来，我们将编写一个封装函数，用于通过 axios 实例对接口进行防抖和节流处理。

    防抖处理

    在防抖处理中，我们需要考虑以下几个方面：

  • 将 axios 实例封装为一个函数。

  1. 在函数调用时进行防抖处理。

    import axios from 'axios'

function request(config) {

const instance = axios.create({

baseURL: 'http://localhost:3000/api',

timeout: 10000

})

// 防抖

const debounceTokenCancel = new Map()

instance.interceptors.request.use(config => {

const tokenKey = `${config.method}-${config.url}`

const cancel = debounceTokenCancel.get(tokenKey)

if (cancel) {

cancel()

}

return config

}, error => {

console.log(error)

return Promise.reject(error)

})
//返回拦截
instance.interceptors.response.use(response => {

return response

}, error => {

console.log(error)

return Promise.reject(error)

})

return instance(config)

}

export default request

    在上述代码中，我们创建了一个 axios 实例，并对该实例进行了防抖处理。其中，debounceTokenCancel 变量用于保存每个请求的计时器对象。在拦截器中，我们通过判断 debounceTokenCancel 中是否存在相应的 key，来决定是否清除计时器和重新设置计时器。

  • 节流处理

    在节流处理中，我们需要考虑以下几个方面：

  • 将 axios 实例封装为一个函数。

  • 在函数调用时进行节流处理。

    import axios from 'axios'
function request(config) {
const instance = axios.create({
baseURL: 'http://localhost:3000/api',
timeout: 10000
})
// 节流
let lastTime = new Date().getTime()
instance.interceptors.request.use(config => {
const nowTime = new Date().getTime()
if (nowTime - lastTime < 1000) {
return Promise.reject(new Error('节流处理中，稍后再试'))
}
lastTime = nowTime
return config
}, error => {
console.log(error)
return Promise.reject(error)
})
instance.interceptors.response.use(response => {
return response
}, error => {
console.log(error)
return Promise.reject(error)
})
return instance(config)
}
export default request

    在上述代码中，我们创建了一个 axios 实例，并对该实例进行了节流处理。其中，lastTime 变量用于保存上一次请求的时间。在拦截器中，我们通过比较当前时间和上一次请求的时间，来决定是否进行节流处理。

  • 一个完整示例

    下面是一个完整的示例代码，包括了防抖和节流：

    下面是一个完整的示例代码，包括了防抖和节流：

    import axios from 'axios' 
 function request(config) {   
const instance = axios.create({  
   baseURL: 'http://localhost:3000/api',    
 timeout: 10000   })  
// 防抖 const debounceTokenCancel = new Map() 
instance.interceptors.request.use(config => {  
 const tokenKey = `${config.method}-${config.url}`  
 const cancel = debounceTokenCancel.get(tokenKey)  
 if (cancel) {     cancel()   }   
return new Promise(resolve => {     
const timer = setTimeout(() => {    
   clearTimeout(timer)     
  resolve(config)     }, 800)     
debounceTokenCancel.set(tokenKey, () => {   
    clearTimeout(timer)       
resolve(new Error('取消请求'))   
  })  
 })
 }, error => {  
 console.log(error)   
return Promise.reject(error) })  
instance.interceptors.response.use(response => {   
return response 
}, error => {  
 console.log(error)  
 return Promise.reject(error) })  
// 节流 let lastTime = new Date().getTime() 
instance.interceptors.request.use(config => {  
 const nowTime = new Date().getTime()  
 if (nowTime - lastTime < 1000) { 
    return Promise.reject(new Error('节流处理中，稍后再试'))  
 }   
lastTime = nowTime  
 return config 
}, error => {   
console.log(error)   
return Promise.reject(error) })  
return instance(config) } 
export default request

    在上述代码中，我们创建了一个 axios 实例，并对该实例进行了防抖和节流处理。其

    中，debounceTokenCancel 变量用于保存每个请求的计时器对象；lastTime 变量用于保存上一次请求的时间。

    结论

    在前端开发中，通过对接口进行防抖和节流处理可以有效减少网络请求和服务端负载，提升网站性能。本文中，我们介绍了如何使用 Vue 和 Axios 对接口进行防抖和节流处理，并详细介绍了实现原理以及注意事项。希望这篇文章可以帮助你更好地完成开发工作。

cjxIt
关注
vue中使用节流
weixin_33814685的博客
05-07 1万+
前言最近刚跳槽了，来到一家新的公司，第一天进来就开始撸代码了，一直比较忙也没有时间更新文章，今天周六本该休息，为什么又来到公司了呢？昨晚下班的时候遇到一个很恶心的bug，由于昨晚走的早没有解决，今天的我是休息不好的，所以今天就来公司解决了这个该死的虫子。最近看到现在写的项目，类似于自己的一个后台管理系统，很多列表页面，列表页面有很多搜索，他们写的代码就是监听数据变化就请求接口，这样请求接口就太频繁...
vue-防抖封装
zxw的博客
09-06 343
封装 /** JS多次触发防抖 * @param {Function} func * @param {number} wait * @param {boolean} immediate * @return {*} */ export function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function () { // 据上一次
Vue节流函数
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-30 1670
,});// 在模板中使用。
vue 防抖封装
weixin_47417181的博客
07-13 312
在main.js中 Vue.directive('preventReClick', { inserted(el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled = false }, binding.value || 2000)
vue 封装防抖、节流
m0_51262126的博客
07-16 3541
函数防抖是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次。函数节流对于短时间内大量触发同一事件（滚动事件、输入框实时搜索），那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次。...
vue 防抖函数的封装以及使用
正是修行时，正是修行时，正式修行时...
07-15 426
vue 防抖函数的封装以及使用
java接口防抖_java swing 防抖机制
weixin_34520360的博客
02-25 249
从问题开始说.我们产品的 操作台(workbench) 是一个java swing程序.有一个event handler的代码如下:public voidactionPerformed(ActionEvent e) {//做耗时的工作, 如插入数据库}现在的一个问题在于, 如果用户连续点了两次button, 则event handler被执行两次, 则用户会得到 主键重复错误.简单的想法是 在e...
同源策略，防抖节流，axios
qq_54598736的博客
08-26 208
同源策略，防抖节流，axios
axios、防抖节流、同源策略概念
q2ui3_的博客
08-26 259
1.同源策略 2.axios 3.防抖节流
vue2项目
qq_41203489的博客
02-08 1277
编程式导航 实现路由跳转有两种方式： 声明式导航：router-link 编程式导航：push|replace 对于导航式路由，我们有多少个a标签就会生成多少个router-link标签，这样当我们频繁操作时会出现卡顿现象。 对于编程式路由，我们是通过触发点击事件实现路由跳转。同理有多少个a标签就会有多少个触发函数。虽然不会出现卡顿，但是也会影响性能。 最好的解决方案就是：编程时导航+事件委派。事件委派就是把子节点的触发时间都委派给父节点，这样就可以只调用一次回调函数goSearch 利用事件委派也存
Vue3.2 电商前台项目（三）—— Home页面和Search页面（axios的封装、分页器的封装）
ailsa_csdn的博客
03-26 2630
vue3.2电商前台项目（三）：axios的封装、swiper轮播图的使用、排序的处理、分页组件的封装，全局组件的注册等知识的熟悉
《优化接口设计的思路》系列：第六篇—接口防抖(防重复提交)的一些方式
summon的博客
12-05 2327
大家好！我是sum墨，一个一线的底层码农，平时喜欢研究和思考一些技术相关的问题并整理成文，限于本人水平，如果文章和代码有表述不当之处，还请不吝赐教。作为一名从业已达六年的老码农，我的工作主要是开发后端Java业务系统，包括各种管理后台和小程序等。在这些项目中，我设计过单/多租户体系系统，对接过许多开放平台，也搞过消息中心这类较为复杂的应用，但幸运的是，我至今还没有遇到过线上系统由于代码崩溃导致资损的情况。这其中的原因有三点：一是业务系统本身并不复杂；
vue关于防抖的封装
yme1034385426的博客
06-22 1077
vue关于防抖的封装 // 防抖 防止表单重复提交 export const Debounce = (fn, t) => { let delay = t || 300 let timer return function () { let args = arguments; if (timer) { clearTimeout(timer) } let callNow = !timer timer = setTimeout(() =&gt
Vue 封装防抖、节流自定义指令
m0_58467921的博客
06-19 400
防抖自定义指令 v-debounce (点击和输入事件) 节流自定义指令 v-throttle (点击和输入事件)
vue 将防抖函数封装成自定义指令
RainHg的博客
03-25 793
指令即 v- 的形式，除了内置指令例如 v-model、v-show 以外，vue 允许注册自定义的指令。自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。
Web前端之Vue+Axios二次封装请求接口、导入导出、模块、createObjectURL、stringify、parseInt、Promise、default、import、export、as
CSDN博客主页地址：https://mengjian.blog.csdn.net/
04-18 1726
Web前端之Vue+Axios二次封装请求接口、导入导出、模块、createObjectURL、stringify、parseInt、Promise、default、import、export、as
Vue处理防抖和节流，项目中封装防抖和节流自定义指令
weixin_53641562的博客
03-20 3723
Vue防抖和节流的处理，概念和应用场景举例，实际项目开发的自定义指令封装
vue 防抖 搜索框防抖 封装全局方法
小菜鸡，努力中~~
01-03 463
vue 防抖 搜索框防抖 封装全局方法
vue3 axios 全局节流防抖
05-16
在 Vue3 中，可以通过自定义插件的方式来实现全局的节流和防抖。以下是一个实现节流和防抖的插件示例： ``` import { throttle, debounce } from 'lodash' const MyPlugin = { install: (app) => { app.config.globalProperties.$throttle = throttle app.config.globalProperties.$debounce = debounce } } export default MyPlugin ``` 在插件中，我们引入了 Lodash 库中的节流和防抖函数。然后，将它们作为 Vue3 全局对象的属性，以便在整个 Vue3 应用程序中可以使用这些函数。 在使用时，我们可以在 Vue3 组件中通过 `$throttle` 和 `$debounce` 调用这些函数。例如，我们可以在发送请求时使用节流来限制请求的频率： ``` import { defineComponent } from 'vue' import { useAxios } from '@/api' import { useDebounce } from '@/plugins/my-plugin' export default defineComponent({ setup() { const { axiosInstance } = useAxios() const debouncedSearch = useDebounce((query) => { axiosInstance.get(`/search?q=${query}`) .then((response) => { // handle response }) }, 500) const handleInput = (event) => { debouncedSearch(event.target.value) } return { handleInput } } }) ``` 在上面的示例中，我们使用了 `$debounce` 函数来创建一个防抖函数 `debouncedSearch`，然后在输入事件处理程序中调用该防抖函数来限制请求的频率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值