怎样利用 Vue 和 Axios 对接口进行防抖和节流处理
Vue + Axios 封装全局接口防抖和节流设置在 Vue 中，可以通过创建一个全局的 axios 实例来封装接口哀求。下面我们将根据需求，对 axios 实例进行编写，实现防抖和节流功能。
防抖
在实现防抖之前，我们先来先容一下什么是“防抖”。在前端开辟中，“防抖”指的是在肯定时间内只能触发一次变乱，通常是输入框或滚动变乱。假如没有防抖控制，页面会出现一些非常环境，比方：搜索框输入过快、滚动条跳动频繁等。
实现原理
防抖的实现原理非常简单，就是通过对要实行的函数进行耽误处理，以此来控制函数实行的次数。具体流程如下：
[*]界说一个变量用于保存计时器。
[*]在函数实行前判断计时器是否存在，假如存在则清除计时器。
[*]为函数设置时间耽误，将返回结果保存到计时器变量中。
[*]等候时间凌驾设定的阈值后，实行相应的回调函数。
下面是防抖代码的示例：
1.定义一个变量用于保存上一次执行函数的时间。
2.则清除计时器。
3.为函数设置时间延迟，将返回结果保存到计时器变量中。
4.等待时间超过设定的阈值后，执行相应的回调函数。
下面是防抖代码的示例：
js复制代码// 防抖
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);
};
} 注意事项
在利用防抖技术的时候，必要注意以下几点：
[*]时间耽误必要根据业务需求进行调解。
[*]在防抖过程中，要确保函数参数传递正确。
节流
相比于防抖技术，节流技术更加灵活。在前端开辟中，“节流”通常指的是在肯定时间内只能实行一次变乱，比方：下拉加载更多、页面滚动等。
实现原理
节流技术的实现原理也非常简单，就是通过设置一个固定时间隔断，在这个时间隔断内只能实行一次相应的回调函数。具体流程如下：
[*]界说一个变量用于保存上一次实行函数的时间。
[*]在实行函数前获取当前的时间戳。
[*]判断当前时间与上一次实行时间是否大于设定的隔断时间，假如大于，则实行相应的回调函数，并更新上一次实行时间。
[*]假如小于设定的隔断时间，则等候下一次实行。
下面是节流代码的示例：
js复制代码// 节流
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);
}
};
} 注意事项
在利用节流技术的时候，必要注意以下几点：
[*]时间隔断必要根据业务需求进行调解。
[*]在节流过程中，要确保函数参数传递正确。
[*]节流过程中可能会出现滞后或者丢失部门变乱的标题，必要进行相应的处理。
封装axios实例
在 Vue 中，可以通过创建一个全局的 axios 实例来封装接口哀求。下面我们将根据需求，对 axios 实例进行编写，实现防抖和节流功能。
首先，我们必要安装 axios 插件：
bash复制代码npm install axios --save 然后，在 main.js 中添加以下代码：
js复制代码import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios
接下来，我们将编写一个封装函数，用于通过 axios 实例对接口进行防抖和节流处理。
防抖处理
在防抖处理中，我们必要考虑以下几个方面：
[*]将 axios 实例封装为一个函数。
[*]在函数调用时进行防抖处理。
下面是封装 axios 实例的示例代码：
js复制代码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 实例封装为一个函数。
[*]在函数调用时进行节流处理。
下面是封装 axios 实例的示例代码：
js复制代码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 变量用于保存上一次哀求的时间。在拦截器中，我们通过比较当前时间和上一次哀求的时间，来决定是否进行节流处理。
一个完整示例
下面是一个完整的示例代码，包罗了防抖和节流：
js复制代码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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]