¿Alguna vez ha tenido una experiencia tal que cada vez que utiliza el desarrollo front-end Ajaxpara realizar solicitudes de datos, la página a menudo envía solicitudes continuamente debido a algunas operaciones incorrectas e incluso hace que el sistema se bloquee? Para resolver este problema, necesitamos eliminar rebotes y acelerar la interfaz.
Este artículo presentará cómo usar Vuey Axiosrealizar el procesamiento anti-vibración y aceleración en la interfaz, y presentará su principio de implementación y precauciones en detalle. ¡Empecemos!
¿Qué es la interfaz antivibración y estrangulamiento?
El antivibración y la aceleración de la interfaz son uno de los componentes importantes de la solución de optimización del rendimiento del sitio web. En términos simples, anti-vibración significa ejecutar una función solo una vez en un cierto período de tiempo, mientras que la limitación significa ejecutar una función solo una vez en un cierto período de tiempo.
En el desarrollo front-end, las solicitudes de red y la carga del servidor se pueden reducir de manera efectiva a través de la interfaz antivibración y aceleración. Al escribir un código antivibración y de limitación, puede asegurarse de que la página de inicio no tenga demasiadas solicitudes, de modo que la página web se cargue más rápido y responda con mayor sensibilidad.
Vue + Axios encapsula la configuración de limitación y antivibración de la interfaz global
En Vue, puede encapsular solicitudes de interfaz creando una axiosinstancia . A continuación, escribiremos axiosejemplos para realizar funciones anti-vibración y estrangulamiento.
anti vibración
Antes de implementar anti-vibración, primero presentemos qué es "anti-vibración". En el desarrollo front-end, "antivibración" se refiere a un evento que solo se puede activar una vez dentro de un cierto período de tiempo, generalmente un cuadro de entrada o un evento de desplazamiento. Si no hay un control antivibración, aparecerán algunas situaciones anormales en la página, tales como: el cuadro de búsqueda se ingresa demasiado rápido, la barra de desplazamiento salta con frecuencia, etc.
Principio de realización
El principio de implementación de anti-vibración es muy simple, que consiste en controlar el número de ejecuciones de funciones retrasando la ejecución de la función. El proceso específico es el siguiente:
- Defina una variable para mantener el temporizador.
- Determine si el temporizador existe antes de que se ejecute la función y borre el temporizador si existe.
- Establezca un retraso de tiempo para la función, guardando el resultado devuelto en una variable de temporizador.
- Después de que el tiempo de espera exceda el umbral establecido, ejecute la función de devolución de llamada correspondiente.
Aquí hay un ejemplo del código anti-vibración:
// 防抖
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);
};
}
复制代码Precauciones
Al utilizar la tecnología antivibración, debe prestar atención a los siguientes puntos:
- El retraso de tiempo debe ajustarse de acuerdo con las necesidades comerciales.
- Durante el proceso antivibración, asegúrese de que los parámetros de la función se transmitan correctamente.
estrangulación
相比于防抖技术，节流技术更加灵活。在前端开发中，“节流”通常指的是在一定时间内只能执行一次事件，例如：下拉加载更多、页面滚动等。
实现原理
节流技术的实现原理也非常简单，就是通过设置一个固定时间间隔，在这个时间间隔内只能执行一次相应的回调函数。具体流程如下：
- 定义一个变量用于保存上一次执行函数的时间。
- 在执行函数前获取当前的时间戳。
- 判断当前时间与上一次执行时间是否大于设定的间隔时间，如果大于，则执行相应的回调函数，并更新上一次执行时间。
- 如果小于设定的间隔时间，则等待下一次执行。
下面是节流代码的示例：
// 节流
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 插件：
npm install axios --save
复制代码然后，在 main.js 中添加以下代码：
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios
复制代码接下来，我们将编写一个封装函数，用于通过 axios 实例对接口进行防抖和节流处理。
防抖处理
在防抖处理中，我们需要考虑以下几个方面：
- 将 axios 实例封装为一个函数。
- 在函数调用时进行防抖处理。
下面是封装 axios 实例的示例代码：
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 实例的示例代码：
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
复制代码En el código anterior, creamos una instancia de axios y aceleramos la instancia. Entre ellos, lastTimela variable se utiliza para guardar la hora de la última solicitud. En el interceptor, decidimos si acelerar comparando la hora actual con la hora de la última solicitud.
un ejemplo completo
Aquí hay un código de muestra completo, que incluye anti-vibración y limitación:
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
复制代码En el código anterior, creamos una instancia de axios y eliminamos el rebote y aceleramos la instancia. Entre ellos, debounceTokenCancella variable se usa para guardar el objeto temporizador de cada solicitud; lastTimela variable se usa para guardar la hora de la última solicitud.
en conclusión
En el desarrollo front-end, el procesamiento anti-vibración y aceleración en la interfaz puede reducir efectivamente las solicitudes de red y la carga del servidor, y mejorar el rendimiento del sitio web. En este artículo, presentamos cómo usar Vue y Axios para evitar sacudidas y acelerar la interfaz, y presentamos el principio de implementación y las precauciones en detalle. Espero que este artículo pueda ayudarlo a completar mejor su trabajo de desarrollo.