Vue浅析axios二次封装与节流及防抖的实现_vue.js_

//对于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;

计数器count的值为0
点我加一

 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 } }