怎样利用 Vue 和 Axios 对接口进行防抖和节流处理

Vue + Axios 封装全局接口防抖和节流设置
在 Vue 中，可以通过创建一个全局的 axios 实例来封装接口哀求。下面我们将根据需求，对 axios 实例进行编写，实现防抖和节流功能。
防抖
在实现防抖之前，我们先来先容一下什么是“防抖”。在前端开辟中，“防抖”指的是在肯定时间内只能触发一次变乱，通常是输入框或滚动变乱。假如没有防抖控制，页面会出现一些非常环境，比方：搜索框输入过快、滚动条跳动频繁等。
实现原理
防抖的实现原理非常简单，就是通过对要实行的函数进行耽误处理，以此来控制函数实行的次数。具体流程如下：

• 界说一个变量用于保存计时器。
  
• 在函数实行前判断计时器是否存在，假如存在则清除计时器。
  
• 为函数设置时间耽误，将返回结果保存到计时器变量中。
  
• 等候时间凌驾设定的阈值后，实行相应的回调函数。
  

下面是防抖代码的示例：

1. 1.定义一个变量用于保存上一次执行函数的时间。
2. 2.则清除计时器。
3. 3.为函数设置时间延迟，将返回结果保存到计时器变量中。
4. 4.等待时间超过设定的阈值后，执行相应的回调函数。
5. 下面是防抖代码的示例：
6. js复制代码// 防抖
7. function debounce(fn, delay = 500) {
8.   let timer = null;
9.   return function(...args) {
10.     if (timer !== null) {
11.       clearTimeout(timer);
12.     }
13.     timer = setTimeout(() => {
14.       fn.apply(this, args);
15.       timer = null;
16.     }, delay);
17.   };
18. }

复制代码

注意事项
在利用防抖技术的时候，必要注意以下几点：

• 时间耽误必要根据业务需求进行调解。
  
• 在防抖过程中，要确保函数参数传递正确。
  

节流
相比于防抖技术，节流技术更加灵活。在前端开辟中，“节流”通常指的是在肯定时间内只能实行一次变乱，比方：下拉加载更多、页面滚动等。
实现原理
节流技术的实现原理也非常简单，就是通过设置一个固定时间隔断，在这个时间隔断内只能实行一次相应的回调函数。具体流程如下：

• 界说一个变量用于保存上一次实行函数的时间。
  
• 在实行函数前获取当前的时间戳。
  
• 判断当前时间与上一次实行时间是否大于设定的隔断时间，假如大于，则实行相应的回调函数，并更新上一次实行时间。
  
• 假如小于设定的隔断时间，则等候下一次实行。
  

下面是节流代码的示例：

1. js复制代码// 节流
2. function throttle(fn, delay = 500) {
3.   let last = 0;
4.   return function(...args) {
5.     let now = new Date().getTime();
6.     if (now - last > delay) {
7.       last = now;
8.       fn.apply(this, args);
9.     }
10.   };
11. }

复制代码

注意事项
在利用节流技术的时候，必要注意以下几点：

• 时间隔断必要根据业务需求进行调解。
  
• 在节流过程中，要确保函数参数传递正确。
  
• 节流过程中可能会出现滞后或者丢失部门变乱的标题，必要进行相应的处理。
  

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

1. bash复制代码npm install axios --save

复制代码

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

1. js复制代码import Vue from 'vue'
2. import axios from 'axios'
4. Vue.prototype.$http = axios

复制代码

接下来，我们将编写一个封装函数，用于通过 axios 实例对接口进行防抖和节流处理。
防抖处理
在防抖处理中，我们必要考虑以下几个方面：

• 将 axios 实例封装为一个函数。
  
• 在函数调用时进行防抖处理。
  

下面是封装 axios 实例的示例代码：

1. js复制代码import axios from 'axios'
3. function request(config) {
4.   const instance = axios.create({
5.     baseURL: 'http://localhost:3000/api',
6.     timeout: 10000
7.   })
9.   // 防抖
10.   const debounceTokenCancel = new Map()
11.   instance.interceptors.request.use(config => {
12.     const tokenKey = `${config.method}-${config.url}`
13.     const cancel = debounceTokenCancel.get(tokenKey)
14.     if (cancel) {
15.       cancel()
16.     }
17.     return config
18.   }, error => {
19.     console.log(error)
20.     return Promise.reject(error)
21.   })
23.   instance.interceptors.response.use(response => {
24.     return response
25.   }, error => {
26.     console.log(error)
27.     return Promise.reject(error)
28.   })
30.   return instance(config)
31. }
33. export default request

复制代码

在上述代码中，我们创建了一个 axios 实例，并对该实例进行了防抖处理。此中，debounceTokenCancel 变量用于保存每个哀求的计时器对象。在拦截器中，我们通过判断 debounceTokenCancel 中是否存在相应的 key，来决定是否清除计时器和重新设置计时器。
节流处理
在节流处理中，我们必要考虑以下几个方面：

• 将 axios 实例封装为一个函数。
  
• 在函数调用时进行节流处理。
  

下面是封装 axios 实例的示例代码：

1. js复制代码import axios from 'axios'
3. function request(config) {
4.   const instance = axios.create({
5.     baseURL: 'http://localhost:3000/api',
6.     timeout: 10000
7.   })
9.   // 节流
10.   let lastTime = new Date().getTime()
11.   instance.interceptors.request.use(config => {
12.     const nowTime = new Date().getTime()
13.     if (nowTime - lastTime < 1000) {
14.       return Promise.reject(new Error('节流处理中，稍后再试'))
15.     }
16.     lastTime = nowTime
17.     return config
18.   }, error => {
19.     console.log(error)
20.     return Promise.reject(error)
21.   })
23.   instance.interceptors.response.use(response => {
24.     return response
25.   }, error => {
26.     console.log(error)
27.     return Promise.reject(error)
28.   })
30.   return instance(config)
31. }
33. export default request

复制代码

在上述代码中，我们创建了一个 axios 实例，并对该实例进行了节流处理。此中，lastTime 变量用于保存上一次哀求的时间。在拦截器中，我们通过比较当前时间和上一次哀求的时间，来决定是否进行节流处理。
一个完整示例
下面是一个完整的示例代码，包罗了防抖和节流：

1. js复制代码import axios from 'axios'
3. function request(config) {
4.   const instance = axios.create({
5.     baseURL: 'http://localhost:3000/api',
6.     timeout: 10000
7.   })
9. // 防抖
10. const debounceTokenCancel = new Map()
11. instance.interceptors.request.use(config => {
12.   const tokenKey = `${config.method}-${config.url}`
13.   const cancel = debounceTokenCancel.get(tokenKey)
14.   if (cancel) {
15.     cancel()
16.   }
17.   return new Promise(resolve => {
18.     const timer = setTimeout(() => {
19.       clearTimeout(timer)
20.       resolve(config)
21.     }, 800)
22.     debounceTokenCancel.set(tokenKey, () => {
23.       clearTimeout(timer)
24.       resolve(new Error('取消请求'))
25.     })
26.   })
27. }, error => {
28.   console.log(error)
29.   return Promise.reject(error)
30. })
32. instance.interceptors.response.use(response => {
33.   return response
34. }, error => {
35.   console.log(error)
36.   return Promise.reject(error)
37. })
39. // 节流
40. let lastTime = new Date().getTime()
41. instance.interceptors.request.use(config => {
42.   const nowTime = new Date().getTime()
43.   if (nowTime - lastTime < 1000) {
44.     return Promise.reject(new Error('节流处理中，稍后再试'))
45.   }
46.   lastTime = nowTime
47.   return config
48. }, error => {
49.   console.log(error)
50.   return Promise.reject(error)
51. })
53. return instance(config)
54. }
56. export default request

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。