Vue浅析axios二次封装与节流及防抖的实现
更新时间：2022年08月11日 17:14:44 作者：_rosy
axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装使用:Vue.use(VueAxios, axios)，本文给大家介绍axios的二次封装和节流与防抖
什么是axios
Axios，是一个基于 promise 的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。
使用方式如下：
<script>
//调用axios方法得到的返回值是 promise 对象
axios({
//请求方式
method: 'get',
// 请求地址
url: 'http://www.liulongbin.top:3006/api/getbooks'//黑马的老师提供的地址
}).then(function(books) {
console.log(books.data)
})
// 另一种写法
const result = axios({
method: 'get',
url: 'http://www.liulongbin.top:3006/api/getbooks'
})
result.then(function(books){
console.log(books.data)
})
</script>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;防抖与节流
概念：
- 节流：在规定的时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。
- 防抖：前面的所有触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次
节流可以理解为游戏里面的技能cd时间，你使用一次后只能等下一次时间好了，才可以释放技能，我们这里就是才可以调用这个函数。它的意义就是防止因为用户多次点击造成多次请求服务器，从而返回错误的信息。有时候也造成浏览器没有充足的时间去解析。我这里设置的时间是3s，在三秒内无论你怎么点击都不会产生效果。demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<h2>计数器count的值为<span>0</span></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>用户操作很频繁但是只执行最后一次。防抖可以理解为回城，被打断了就要重新读秒。下面是一个封装好的防抖函数
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
}
}这里要注意防抖和节流的区别，节流是由执行很多次变为执行少量次数，防抖是有多次变为执行最后一次
到此这篇关于Vue浅析axios二次封装与节流及防抖的实现的文章就介绍到这了,更多相关Vue axios内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue+elementui实现动态添加行/可编辑的table
这篇文章主要为大家详细介绍了vue+elementui实现动态添加行/可编辑的table，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本文主要介绍了使用Elemen加上lang=“ts“后编译报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了vue中的@click.native 原生点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
快速解决vue动态绑定多个class的官方实例语法无效的问题
今天小编就为大家分享一篇快速解决vue动态绑定多个class的官方实例语法无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
前端开发的时候,在项目中引入组件以及使用是非常常见操作,下面这篇文章主要给大家介绍了关于Vue全局提示组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Vue Element UI使用中遇到的问题，对ElementUI感兴趣的同学，可以参考下2021-05-05
本文通过实例代码给大家介绍了vue实现底部菜单功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
下面小编就为大家分享一篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了在nuxt使用vueX代替storage的实现方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了在vue中使用eacharts创建graph关系图方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论