• vue中对axios的二次封装和节流与防抖

    axios的二次封装

    为什么要进行二次封装

    请求拦截器和响应拦截器

    • 请求拦截器：可以在发请求之前可以处理一些业务
    • 响应拦截器：当服务器数据返回以后，可以处理一些事情

    代码如下：

    //对于axios进行二次封装
import axios from 'axios'
import nprogress from 'nprogress';
// start:进度条开始 done：进度条结束
//1：利用axios对象的方法create，去创建一个axios实例
//引入进度条样式
import 'nprogress/nprogress.css'
//2:request就是axios，只不过稍微配置一下子
const requests =axios.create({
    //配置对象
    //基础路径，发请求的时候，；路径中会出现/api，自己就不用手动添加了
    baseURL:'/api',//这里实现二次封装
    //设置请求超时时间5s
    timeout:5000,
});
//请求拦截器：在发送请求之前可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
    //config：配置对象，对象里面有一个很重要的header请求头
    nprogress.start()//请求网络接口进度条开始
    return config;
});

//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功的回调函数：服务器相应的数据回来之后，响应拦截器可以检测到，可以做一些事情
    nprogress.done()//请求网络接口进度条结束
    return res.data;
},(error)=>{
    console.log(error)
    return Promise.reject(new Error('faile'));
})


//对外暴露
export default requests;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    防抖与节流

    概念：

    • 节流：在规定的时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。
    • 防抖：前面的所有触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次。也可以这样理解：当持续触发事件时，指定时间（自定义）没有再触发事件，事件处理函数才会执行一次。如果小于指定，时间触发事件，事件处理函数不会被执行，而是以最后一次触发的事件，重新计算

    节流

    节流可以理解为游戏里面的技能cd时间，你使用一次后只能等下一次时间好了，才可以释放技能，我们这里就是才可以调用这个函数。它的意义就是防止因为用户多次点击造成多次请求服务器，从而返回错误的信息。有时候也造成浏览器没有充足的时间去解析。我这里设置的时间是3s，在三秒内无论你怎么点击都不会产生效果。demo如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <h2>计数器count的值为<span>0span>h2>
    <title>防抖节流小案例title>
head>
<body>
     <button onclick="add()">点我加一button>
body>
html>
<script>
    /* 防止重复点击 */
    let count=0;
let clickTimer = 0
 
 function add() {
    
     let now = +new Date(); // 获取当前时间的时间戳
     let timer = clickTimer; // 记录触发事件的事件戳
     let span =document.querySelector('span');
     if (now - timer < 3000) {
     // 如果当前时间 - 触发事件时的事件 < 3s，那么不符合条件，直接return ，
     // 不让当前事件继续执行下去
         return ;
     } else { 
     // 反之，记录符合条件触发了事件的时间戳，使事件继续往下执行
         clickTimer = now;
         count++;
        span.innerHTML=count
         console.log(count)
     }
 }
  

script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    防抖

    用户操作很频繁但是只执行最后一次。防抖可以理解为回城，被打断了就要重新读秒。
    下面给出两个demo，一个是html中的，另一个是在vue中封装好的的防抖函数。
    debounce：去除抖动

    注意注意，一定不能把debounce函数写在一个方法中，比如说点击事件，为什么呢，因为如果把防抖函数放在函数中，这就导致了，你每一次点击都会调用getData()方法，每次都会调用debounce都新建一个debounce函数域
    导致每次所设置计时器都在不同的debounce函数闭包中，无法访问，每次调用debounce都会将重新定义一个并timer赋值为null，所以会产生每次判断timer都是null值

    html版

    可以直接在vscode中新建一个html或者直接在桌面建立一个html文本，用浏览器打开，并且在浏览器中按F12打开控制台，每次点击时你就会发现它的奇妙，并且才能够理解什么叫做防抖！！！一定要自己在浏览器中观察!!!示例图如下：
    在这里插入图片描述
    防抖函数解释：

     function debounce(fn, time) {//fn是一个函数，time是延迟时间
    let timeID = null //初始化定时器id
    return function () {
      if (timeID !== null) {
        clearTimeout(timeID) //如果id不为空则清空定时器，从新执行定时器
      }
      timeID = setTimeout(() => {//定时器返回一个id
        fn.call(this)//如果时间到了且id不为空则产生回调函数执行原本的fn函数
      }, time||2000);//如果time不传或为空则默认延迟时间为2s
    }
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    应用：

    DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>防抖小案例title>
  head>
  <body>
    <h2>计数器count的值为<span>0span>h2>
    <button id="btn">点我加一button>
  body>
html>
<script>
  /* 防止重复点击 */
  let count = 0;
  let span = document.querySelector("span"); //获取span的dom
  let btn = document.getElementById("btn");
  btn.onclick = debounce(function () {
    
    count++;
    span.innerHTML = count;
    console.log("调用过了哟，count的值为：",count);
  }, 500);

  function debounce(fn, time) {
    let timeID = null;
    return function () {
     
      if (timeID) {//不为空时
        console.log("被清空啦");
        clearTimeout(timeID);
      }
      
      timeID = setTimeout(() => {
        fn.call(this);
        timeID = null;//注意使用完后将timeID置位null否则下一次是第一次点还是会打印出被清空啦
      }, time);
    };
  }

script>
 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    vue组件版

    // 函数防抖
export function debounce(fn, delay) {
    // 记录上一次的延时器
    var timer = null;
    var delay = delay || 200;
    return function() {
    
      var that = this;//保留本次this指向，因为最后的回调函数的this指向Windows
      // 清除上一次延时器
      if(timer){
      clearTimeout(timer)
      }
      timer = setTimeout(function() {
          fn.apply(that)
      }, delay);
    }
  }
 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    封装完毕后进行导出使用
    import {debounce} from “XXX” 其中XXX是你存放这个方法的文件目录

    注意这里也需要是对象的形式来调用
    methods:{
    YYY:debounce(function(){console.log(1234);},1000), //注意这里的YYY就是一个事件，比如说一个点击事件click啊，就是你需要使用debounce的地方
    }

    这里要注意防抖和节流的区别，节流是由执行很多次变为执行少量次数，防抖是有多次变为执行最后一次

  • 相关阅读:
    LP-SCADA系统在智能制造中的作用是什么？
    2021 中国系统java面试笔试题（含面试题解析）
    第三十八章 在 UNIX®、Linux 和 macOS 上使用 IRIS（三）
    编程堆芯熔融物自然对流的
    Spring Cloud Alibaba【创建支付服务生产者、创建服务消费者 、Dubbo和OpenFeign区别 、微服务接入OpenFeign】（二）
    项目上线部署--》服务器部署流程（一）
    RabbitMQ：主题模式
    NtyCo纯C协程的原理分析
    LeetCode --- 1952. Three Divisors 解题报告
    浅析显卡市场的未来走向：现在可以抄底了吗？
  • 原文地址：https://blog.csdn.net/qq_51580852/article/details/126235736