Interface global Vue + Axios antivibração, implementação de pacote de limitação, tornando seu desenvolvimento de front-end mais eficiente

Language 2023-06-04 19:12:40 views: null

capa.png

Você já passou por uma experiência dessas sempre que usa no desenvolvimento front-end Ajaxpara fazer requisições de dados, muitas vezes a página envia requisições continuamente devido a algumas operações erradas, e até faz com que o sistema trave? Para resolver esse problema, precisamos depurar e limitar a interface.

Este artigo apresentará como usar Vuee Axiosexecutar o processamento antivibração e limitação na interface e apresentará seu princípio de implementação e precauções em detalhes. vamos começar!

O que é interface antivibração e estrangulamento?

A interface antivibração e limitação são um dos componentes importantes da solução de otimização de desempenho do site. Em termos simples, antivibração significa executar uma função apenas uma vez em um determinado período de tempo, enquanto estrangulamento significa executar uma função apenas uma vez em um determinado período de tempo.

No desenvolvimento de front-end, as solicitações de rede e a carga do servidor podem ser efetivamente reduzidas por meio de antivibração e limitação da interface. Ao escrever um código antivibração e limitação, você pode garantir que a página de front-end não tenha muitas solicitações, de modo que a página da Web carregue mais rapidamente e responda com mais sensibilidade.

Vue + Axios encapsula a configuração antivibração e limitação da interface global

No Vue, você pode encapsular solicitações de interface criando uma axiosinstância . Em seguida, escreveremos axiosexemplos para realizar as funções antivibração e estrangulamento.

anti-vibração

Antes de implementar o anti-vibração, vamos primeiro apresentar o que é "anti-vibração". No desenvolvimento front-end, "anti-vibração" refere-se a um evento que só pode ser acionado uma vez dentro de um determinado período de tempo, geralmente uma caixa de entrada ou um evento de rolagem. Se não houver controle anti-vibração, algumas situações anormais aparecerão na página, como: a caixa de pesquisa é digitada muito rápido, a barra de rolagem pula com frequência, etc.

princípio de realização

O princípio de implementação do anti-vibração é muito simples, que é controlar o número de execuções da função atrasando a função a ser executada. O processo específico é o seguinte:

  1. Defina uma variável para manter o temporizador.
  2. Determine se o cronômetro existe antes da execução da função e limpe o cronômetro, se existir.
  3. Defina um atraso de tempo para a função, salvando o resultado de retorno em uma variável de timer.
  4. Depois que o tempo de espera exceder o limite definido, execute a função de retorno de chamada correspondente.

Aqui está um exemplo do código anti-vibração:

// 防抖
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);
  };
}
复制代码

Precauções

Ao usar a tecnologia antivibração, você precisa prestar atenção aos seguintes pontos:

  1. O atraso de tempo precisa ser ajustado de acordo com as necessidades do negócio.
  2. Durante o processo antivibração, certifique-se de que os parâmetros da função sejam passados ​​corretamente.

estrangulamento

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

实现原理

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

  1. 定义一个变量用于保存上一次执行函数的时间。
  2. 在执行函数前获取当前的时间戳。
  3. 判断当前时间与上一次执行时间是否大于设定的间隔时间，如果大于，则执行相应的回调函数，并更新上一次执行时间。
  4. 如果小于设定的间隔时间，则等待下一次执行。

下面是节流代码的示例：

// 节流
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);
    }
  };
}
复制代码

注意事项

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

  1. 时间间隔需要根据业务需求进行调整。
  2. 在节流过程中，要确保函数参数传递正确。
  3. 节流过程中可能会出现滞后或者丢失部分事件的问题，需要进行相应的处理。

封装axios实例

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

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

npm install axios --save
复制代码

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

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios
复制代码

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

防抖处理

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

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

下面是封装 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，来决定是否清除计时器和重新设置计时器。

节流处理

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

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

下面是封装 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
复制代码

No código acima, criamos uma instância de axios e limitamos a instância. Dentre eles, lastTimea variável é utilizada para salvar o horário da última requisição. No interceptador, decidimos se devemos limitar comparando a hora atual com a hora da última solicitação.

um exemplo completo

Aqui está um código de amostra completo, incluindo antivibração e limitação:

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
复制代码

No código acima, criamos uma instância de axios e debounce e limitamos a instância. Entre eles, debounceTokenCancela variável é usada para salvar o objeto timer de cada solicitação; lastTimea variável é usada para salvar o horário da última solicitação.

para concluir

No desenvolvimento de front-end, o processamento antivibração e limitação na interface pode efetivamente reduzir as solicitações de rede e a carga do servidor e melhorar o desempenho do site. Neste artigo, apresentamos como usar o Vue e o Axios para antivibração e limitar a interface e apresentamos o princípio de implementação e as precauções em detalhes. Espero que este artigo possa ajudá-lo a concluir melhor seu trabalho de desenvolvimento.

Acho que você gosta

Origin juejin.im/post/7225133152490160187
Recomendado
Clasificación
Diario
Más
2024-06-01(0)
2024-05-31(0)
2024-05-30(0)
2024-05-29(0)
2024-05-28(0)
2024-05-27(0)
2024-05-26(0)
2024-05-25(0)
2024-05-24(11)
2024-05-23(35)

Code World

© 2018 codetd.com