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

2024-10-23 06:42:45

什么是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二次封装axios为插件使用详解

照例先贴上 axios的 gitHub 地址不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-resource,vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因,废话不多说: 基本的封装要求: 统一 url 配置统一 api 请求 request (请求)拦截器,例如:带上token等,设置请求头 response (响应)拦截器,例如:统一错误处理,页面重
vue axios二次封装的详细解析

axios的二次封装视频讲解 npm i axios //下载axios 首先创建两个文件夹在src目录下:api和config 先在config文件夹下建立一个index.js:具体代码如下: export default{ baseUrl:{ dev: "http://localhost:8082/mhy", //开发环境 pro: "http://xxx.xx.xx.xx:8082/mhy", //上线环境 } } 当然我这里是因为我主要写后端springb
vue中axios的二次封装实例讲解

我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理第一步,先在src中的公共文件夹中如utils里新建request.js文件 import axios from 'axios' import router from '@/router/routers' import { Notification, MessageBox } from 'element-ui' import store from '
vue axios基于常见业务场景的二次封装的实现

axios axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 在前端框架中的应用也是特别广泛,不管是vue还是react,都有很多项目用axios作为网络请求库. 我在最近的几个项目中都有使用axios,并基于axios根据常见的业务场景封装了一个通用的request服务. npm: $ npm install axios bower: $ bower install axios Using cdn: <script src="https:/
vue axios 二次封装的示例代码

这段时间告诉项目需要,用到了vue. 刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了顺便封装了一下 //引入axios import axios from 'axios' let cancel ,promiseArr = {} const CancelToken = axios.CancelToken; //请求拦截器 axios.interceptors.request.use(config => { //发起请求时,取消掉当前正在进行的相同请求 if
详解vue axios二次封装

这段时间告诉项目需要,用到了vue. 刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了顺便封装了一下定义公共参数与引入组件: import axios from 'axios' import qs from 'qs' axios.interceptors.request.use(config => { //显示loading return config }, error => { return Promise.reject(error) }) axios
vue-cil之axios的二次封装与proxy反向代理使用说明

目录 Axios与proxy反向代理 1.Axios 的特性 2.Axios 的安装 3.Axios 与proxy反向代理的使用 axios反向代理proxy个人理解使用反向代理proxy的原因 proxy基本配置 Axios与proxy反向代理 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 1.Axios 的特性从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 PromiseAPI 拦截请求和
Vue浅析axios二次封装与节流及防抖的实现

目录什么是axios axios请求图例 axios的二次封装为什么要进行二次封装防抖与节流什么是axios Axios,是一个基于 promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中). 使用方式如下: <script> //调用axios方法得到的返回值是 promise 对象 axios({ //请求方式 method: 'get', // 请求地址 url: 'http://www.liu
项目中Axios二次封装实例Demo

1.为什么做封装? 方便代码整体调用.对请求做公共处理.个性化定制 2.别人已经封装了很多,为什么不直接修改使用? 封装思路不适合自身项目封装后调用不方便 3.个人封装demo 代码结构[基于vue] 基本思路将所有的请求接口地址按照文件分模块存储,比如 request/module/user 用户信息相关模块[服务] 2.封装方法.类.给所有请求绑定常用的请求方法,和对请求url上的路径参数做处理 generateServer.js import server from "../util/
vue对el-autocomplete二次封装增加下拉分页

目录 1.自定义指令实现下拉加载更多. 2.增加props(getOptionFn.searchKey.value.placeholder)抽离业务.成为公共组件 3.可能需要解释的项目中的联想输入框现在都是采用的el-autocomplete实现的,但是随着数据量越来越多,产品要求一次不要返回所有的联想数据,要做分页处理,所以需要添加一个分页的功能. 注:看懂下面的代码需要先对vue和element有一定的学习. 废话不多数,先上完整代码 <template> <el-autocom
详解vue中axios请求的封装

axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理安装 npm i axios 封装我把axios请求封装在http.js中,重新把get请求,post请求封装了一次首先,引入axios import axios from 'axios' 设置接口请求前缀一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用
解决ant design vue 表格a-table二次封装,slots渲染的问题

目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&
vue中axios请求的封装实例代码

axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理安装 npm i axios 封装我把axios请求封装在http.js中,重新把get请求,post请求封装了一次首先,引入axios import axios from 'axios' 设置接口请求前缀一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用
vue日常开发基础Axios网络库封装

目录引言 axios使用配置请求基本信息设置请求拦截器设置请求响应器项目中使用结尾引言首先Axios,一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 网络请求库无疑是项目开发中最基础的建设了,在这个前后端分离的时代,市面上有不少优秀的请求库,其中Axios就是优秀代表之一. 拦截请求和响应转换请求数据和响应数据自动转换 JSON 数据客户端支持防御 XSRF 支持 PromiseAPI 以上是axios的优秀点 axios使用本文是基于