快捷導(dǎo)航

Vue淺析axios二次封裝與節(jié)流及防抖的實(shí)現(xiàn)

更新時(shí)間：2022年08月11日 17:14:44 作者：_rosy

axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios,?axios)，本文給大家介紹axios的二次封裝和節(jié)流與防抖

什么是axios

Axios，是一個(gè)基于 promise 的網(wǎng)絡(luò)請(qǐng)求庫，作用于node.js和瀏覽器中，它是 isomorphic 的(即同一套代碼可以運(yùn)行在瀏覽器和node.js中)。

使用方式如下：

<script>
        //調(diào)用axios方法得到的返回值是 promise 對(duì)象
        axios({
            //請(qǐng)求方式
            method: 'get',
            // 請(qǐng)求地址
            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請(qǐng)求圖例

axios的二次封裝

為什么要進(jìn)行二次封裝

請(qǐng)求攔截器和響應(yīng)攔截器

請(qǐng)求攔截器：可以在發(fā)請(qǐng)求之前可以處理一些業(yè)務(wù)
響應(yīng)攔截器：當(dāng)服務(wù)器數(shù)據(jù)返回以后，可以處理一些事情

代碼如下：

//對(duì)于axios進(jìn)行二次封裝
import axios from 'axios'
import nprogress from 'nprogress';
// start:進(jìn)度條開始 done：進(jìn)度條結(jié)束
//1：利用axios對(duì)象的方法create，去創(chuàng)建一個(gè)axios實(shí)例
//引入進(jìn)度條樣式
import 'nprogress/nprogress.css'
//2:request就是axios，只不過稍微配置一下子
const requests =axios.create({
    //配置對(duì)象
    //基礎(chǔ)路徑，發(fā)請(qǐng)求的時(shí)候，；路徑中會(huì)出現(xiàn)/api，自己就不用手動(dòng)添加了
    baseURL:'/api',//這里實(shí)現(xiàn)二次封裝
    //設(shè)置請(qǐng)求超時(shí)時(shí)間5s
    timeout:5000,
});
//請(qǐng)求攔截器：在發(fā)送請(qǐng)求之前可以檢測到，可以在請(qǐng)求發(fā)出去之前做一些事情
requests.interceptors.request.use((config)=>{
    //config：配置對(duì)象，對(duì)象里面有一個(gè)很重要的header請(qǐng)求頭
    nprogress.start()//請(qǐng)求網(wǎng)絡(luò)接口進(jìn)度條開始
    return config;
});
//響應(yīng)攔截器
requests.interceptors.response.use((res)=>{
    //成功的回調(diào)函數(shù)：服務(wù)器相應(yīng)的數(shù)據(jù)回來之后，響應(yīng)攔截器可以檢測到，可以做一些事情
    nprogress.done()//請(qǐng)求網(wǎng)絡(luò)接口進(jìn)度條結(jié)束
    return res.data;
},(error)=>{
    console.log(error)
    return Promise.reject(new Error('faile'));
})
//對(duì)外暴露
export default requests;

防抖與節(jié)流

概念：

節(jié)流：在規(guī)定的時(shí)間范圍內(nèi)不會(huì)重復(fù)觸發(fā)回調(diào)，只有大于這個(gè)時(shí)間間隔才會(huì)觸發(fā)回調(diào)，把頻繁觸發(fā)變?yōu)樯倭坑|發(fā)。
防抖：前面的所有觸發(fā)都被取消，最后一次執(zhí)行在規(guī)定的時(shí)間之后才會(huì)觸發(fā)，也就是說如果連續(xù)快速的觸發(fā)，只會(huì)執(zhí)行一次

節(jié)流可以理解為游戲里面的技能cd時(shí)間，你使用一次后只能等下一次時(shí)間好了，才可以釋放技能，我們這里就是才可以調(diào)用這個(gè)函數(shù)。它的意義就是防止因?yàn)橛脩舳啻吸c(diǎn)擊造成多次請(qǐng)求服務(wù)器，從而返回錯(cuò)誤的信息。有時(shí)候也造成瀏覽器沒有充足的時(shí)間去解析。我這里設(shè)置的時(shí)間是3s，在三秒內(nèi)無論你怎么點(diǎn)擊都不會(huì)產(chǎn)生效果。demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <h2>計(jì)數(shù)器count的值為<span>0</span></h2>
    <title>防抖節(jié)流小案例</title>
</head>
<body>
     <button onclick="add()">點(diǎn)我加一</button>
</body>
</html>
<script>
    /* 防止重復(fù)點(diǎn)擊 */
    let count=0;
let clickTimer = 0
 function add() {
     let now = +new Date(); // 獲取當(dāng)前時(shí)間的時(shí)間戳
     let timer = clickTimer; // 記錄觸發(fā)事件的事件戳
     let span =document.querySelector('span');
     if (now - timer < 3000) {
     // 如果當(dāng)前時(shí)間 - 觸發(fā)事件時(shí)的事件 < 3s，那么不符合條件，直接return ，
     // 不讓當(dāng)前事件繼續(xù)執(zhí)行下去
         return ;
     } else { 
     // 反之，記錄符合條件觸發(fā)了事件的時(shí)間戳，使事件繼續(xù)往下執(zhí)行
         clickTimer = now;
         count++;
        span.innerHTML=count
         console.log(count)
     }
 }
</script>

用戶操作很頻繁但是只執(zhí)行最后一次。防抖可以理解為回城，被打斷了就要重新讀秒。下面是一個(gè)封裝好的防抖函數(shù)

 function debounce(fn, time) {//fn是一個(gè)函數(shù)，time是延遲時(shí)間
    let timeID = null //初始化定時(shí)器id
    return function () {
      if (timeID !== null) {
        clearTimeout(timeID) //如果id不為空則清空定時(shí)器，從新執(zhí)行定時(shí)器
      }
      timeID = setTimeout(() => {//定時(shí)器返回一個(gè)id
        fn.call(this)//如果時(shí)間到了且id不為空則產(chǎn)生回調(diào)函數(shù)執(zhí)行原本的fn函數(shù)
      }, time||2000);//如果time不傳或?yàn)榭談t默認(rèn)延遲時(shí)間為2s
    }
  }

這里要注意防抖和節(jié)流的區(qū)別，節(jié)流是由執(zhí)行很多次變?yōu)閳?zhí)行少量次數(shù)，防抖是有多次變?yōu)閳?zhí)行最后一次

到此這篇關(guān)于Vue淺析axios二次封裝與節(jié)流及防抖的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue axios內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: