Vue + Axios全局接口防抖、节流封装实现，让你前端开发更高效

浠€涔堟槸鎺ュ彛闃叉姈鍜岃妭娴侊紵

鎺ュ彛闃叉姈鍜岃妭娴佹槸缃戠珯鎬ц兘浼樺寲鏂规鐨勯噸瑕佺粍鎴愰儴鍒嗕箣涓€銆傜畝鍗曟潵璇达紝闃叉姈鏄寚鍦ㄧ壒瀹氱殑鏃堕棿鍐呭彧鎵ц涓€娆″嚱鏁帮紝鑰岃妭娴佹槸鎸囧湪涓€涓椂闂存鍐呮墠鎵ц涓€娆″嚱鏁般€?br> 鍦ㄥ墠绔紑鍙戜腑锛岄€氳繃鎺ュ彛闃叉姈鍜岃妭娴佸彲浠ユ湁鏁堝噺灏戠綉缁滆姹傚拰鏈嶅姟绔礋杞姐€傞€氳繃缂栧啓闃叉姈鍜岃妭娴佷唬鐮佺殑鏂瑰紡锛屽彲浠ョ‘淇濆墠绔〉闈笉浼氬嚭鐜拌繃澶氱殑璇锋眰鏁伴噺锛屼粠鑰屼娇缃戦〉鍔犺浇閫熷害鏇村揩銆佸搷搴旀洿鐏垫晱銆?/p>

Vue + Axios 灏佽鍏ㄥ眬鎺ュ彛闃叉姈鍜岃妭娴侀厤缃?/h3>

鍦?Vue 涓紝鍙互閫氳繃鍒涘缓涓€涓叏灞€鐨?axios 瀹炰緥鏉ュ皝瑁呮帴鍙ｈ姹傘€備笅闈㈡垜浠皢鏍规嵁闇€姹傦紝瀵?axios 瀹炰緥杩涜缂栧啓锛屽疄鐜伴槻鎶栧拰鑺傛祦鍔熻兘銆?/p>

闃叉姈

鍦ㄥ疄鐜伴槻鎶栦箣鍓嶏紝鎴戜滑鍏堟潵浠嬬粛涓€涓嬩粈涔堟槸鈥滈槻鎶栤€濄€傚湪鍓嶇寮€鍙戜腑锛屸€滈槻鎶栤€濇寚鐨勬槸鍦ㄤ竴瀹氭椂闂村唴鍙兘瑙﹀彂涓€娆′簨浠讹紝閫氬父鏄緭鍏ユ鎴栨粴鍔ㄤ簨浠躲€傚亣濡傛病鏈夐槻鎶栨帶鍒讹紝椤甸潰浼氬嚭鐜颁竴浜涘紓甯告儏鍐碉紝渚嬪锛氭悳绱㈡杈撳叆杩囧揩銆佹粴鍔ㄦ潯璺冲姩棰戠箒绛夈€?/p>

瀹炵幇鍘熺悊

闃叉姈鐨勫疄鐜板師鐞嗛潪甯哥畝鍗曪紝灏辨槸閫氳繃瀵硅鎵ц鐨勫嚱鏁拌繘琛屽欢杩熷鐞嗭紝浠ユ鏉ユ帶鍒跺嚱鏁版墽琛岀殑娆℃暟銆傚叿浣撴祦绋嬪涓嬶細

瀹氫箟涓€涓彉閲忕敤浜庝繚瀛樿鏃跺櫒銆?br> 鍦ㄥ嚱鏁版墽琛屽墠鍒ゆ柇璁℃椂鍣ㄦ槸鍚﹀瓨鍦紝濡傛灉瀛樺湪鍒欐竻闄よ鏃跺櫒銆?br> 涓哄嚱鏁拌缃椂闂村欢杩燂紝灏嗚繑鍥炵粨鏋滀繚瀛樺埌璁℃椂鍣ㄥ彉閲忎腑銆?br> 绛夊緟鏃堕棿瓒呰繃璁惧畾鐨勯槇鍊煎悗锛屾墽琛岀浉搴旂殑鍥炶皟鍑芥暟銆?/p>

涓嬮潰鏄槻鎶栦唬鐮佺殑绀轰緥锛?/p>

// 闃叉姈
function debounce(fn, delay = 500) {
  let timer = null;
  return function(...args) {
    if (timer !== null) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

娉ㄦ剰浜嬮」
鍦ㄤ娇鐢ㄩ槻鎶栨妧鏈殑鏃跺€欙紝闇€瑕佹敞鎰忎互涓嬪嚑鐐癸細

鏃堕棿寤惰繜闇€瑕佹牴鎹笟鍔￠渶姹傝繘琛岃皟鏁淬€?br> 鍦ㄩ槻鎶栬繃绋嬩腑锛岃纭繚鍑芥暟鍙傛暟浼犻€掓纭€?/p>

鑺傛祦

鐩告瘮浜庨槻鎶栨妧鏈紝鑺傛祦鎶€鏈洿鍔犵伒娲汇€傚湪鍓嶇寮€鍙戜腑锛屸€滆妭娴佲€濋€氬父鎸囩殑鏄湪涓€瀹氭椂闂村唴鍙兘鎵ц涓€娆′簨浠讹紝渚嬪锛氫笅鎷夊姞杞芥洿澶氥€侀〉闈㈡粴鍔ㄧ瓑銆?br> 瀹炵幇鍘熺悊
鑺傛祦鎶€鏈殑瀹炵幇鍘熺悊涔熼潪甯哥畝鍗曪紝灏辨槸閫氳繃璁剧疆涓€涓浐瀹氭椂闂撮棿闅旓紝鍦ㄨ繖涓椂闂撮棿闅斿唴鍙兘鎵ц涓€娆＄浉搴旂殑鍥炶皟鍑芥暟銆傚叿浣撴祦绋嬪涓嬶細

瀹氫箟涓€涓彉閲忕敤浜庝繚瀛樹笂涓€娆℃墽琛屽嚱鏁扮殑鏃堕棿銆?br> 鍦ㄦ墽琛屽嚱鏁板墠鑾峰彇褰撳墠鐨勬椂闂存埑銆?br> 鍒ゆ柇褰撳墠鏃堕棿涓庝笂涓€娆℃墽琛屾椂闂存槸鍚﹀ぇ浜庤瀹氱殑闂撮殧鏃堕棿锛屽鏋滃ぇ浜庯紝鍒欐墽琛岀浉搴旂殑鍥炶皟鍑芥暟锛屽苟鏇存柊涓婁竴娆℃墽琛屾椂闂淬€?br> 濡傛灉灏忎簬璁惧畾鐨勯棿闅旀椂闂达紝鍒欑瓑寰呬笅涓€娆℃墽琛屻€?/p>

涓嬮潰鏄妭娴佷唬鐮佺殑绀轰緥锛?/p>

// 鑺傛祦
function throttle(fn, delay = 500) {
  let last = 0;
  return function(...args) {
    let now = new Date().getTime();
    if (now - last > delay) {
      last = now;
      fn.apply(this, args);
    }
  };
}

娉ㄦ剰浜嬮」
鍦ㄤ娇鐢ㄨ妭娴佹妧鏈殑鏃跺€欙紝闇€瑕佹敞鎰忎互涓嬪嚑鐐癸細

鏃堕棿闂撮殧闇€瑕佹牴鎹笟鍔￠渶姹傝繘琛岃皟鏁淬€?br> 鍦ㄨ妭娴佽繃绋嬩腑锛岃纭繚鍑芥暟鍙傛暟浼犻€掓纭€?br> 鑺傛祦杩囩▼涓彲鑳戒細鍑虹幇婊炲悗鎴栬€呬涪澶遍儴鍒嗕簨浠剁殑闂锛岄渶瑕佽繘琛岀浉搴旂殑澶勭悊銆?/p>

灏佽axios瀹炰緥

鍦?Vue 涓紝鍙互閫氳繃鍒涘缓涓€涓叏灞€鐨?axios 瀹炰緥鏉ュ皝瑁呮帴鍙ｈ姹傘€備笅闈㈡垜浠皢鏍规嵁闇€姹傦紝瀵?axios 瀹炰緥杩涜缂栧啓锛屽疄鐜伴槻鎶栧拰鑺傛祦鍔熻兘銆?br> 棣栧厛锛屾垜浠渶瑕佸畨瑁?axios 鎻掍欢锛?/p>

npm install axios --save

鐒跺悗锛屽湪 main.js 涓坊鍔犱互涓嬩唬鐮侊細

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios

鎺ヤ笅鏉ワ紝鎴戜滑灏嗙紪鍐欎竴涓皝瑁呭嚱鏁帮紝鐢ㄤ簬閫氳繃 axios 瀹炰緥瀵规帴鍙ｈ繘琛岄槻鎶栧拰鑺傛祦澶勭悊銆?/p>

闃叉姈澶勭悊

鍦ㄩ槻鎶栧鐞嗕腑锛屾垜浠渶瑕佽€冭檻浠ヤ笅鍑犱釜鏂归潰锛?/p>

灏?axios 瀹炰緥灏佽涓轰竴涓嚱鏁般€?br> 鍦ㄥ嚱鏁拌皟鐢ㄦ椂杩涜闃叉姈澶勭悊銆?br> 涓嬮潰鏄皝瑁?axios 瀹炰緥鐨勭ず渚嬩唬鐮侊細

import axios from 'axios'

function request(config) {
  const instance = axios.create({
    baseURL: 'http://localhost:3000/api',
    timeout: 10000
  })

  // 闃叉姈
  const debounceTokenCancel = new Map()
  instance.interceptors.request.use(config => {
    const tokenKey = `${config.method}-${config.url}`
    const cancel = debounceTokenCancel.get(tokenKey)
    if (cancel) {
      cancel()
    }
    return config
  }, error => {
    console.log(error)
    return Promise.reject(error)
  })

  instance.interceptors.response.use(response => {
    return response
  }, error => {
    console.log(error)
    return Promise.reject(error)
  })

  return instance(config)
}

export default request

鍦ㄤ笂杩颁唬鐮佷腑锛屾垜浠垱寤轰簡涓€涓?axios 瀹炰緥锛屽苟瀵硅瀹炰緥杩涜浜嗛槻鎶栧鐞嗐€傚叾涓紝debounceTokenCancel 鍙橀噺鐢ㄤ簬淇濆瓨姣忎釜璇锋眰鐨勮鏃跺櫒瀵硅薄銆傚湪鎷︽埅鍣ㄤ腑锛屾垜浠€氳繃鍒ゆ柇 debounceTokenCancel 涓槸鍚﹀瓨鍦ㄧ浉搴旂殑 key锛屾潵鍐冲畾鏄惁娓呴櫎璁℃椂鍣ㄥ拰閲嶆柊璁剧疆璁℃椂鍣ㄣ€?/p>

鑺傛祦澶勭悊

鍦ㄨ妭娴佸鐞嗕腑锛屾垜浠渶瑕佽€冭檻浠ヤ笅鍑犱釜鏂归潰锛?/p>

灏?axios 瀹炰緥灏佽涓轰竴涓嚱鏁般€?br> 鍦ㄥ嚱鏁拌皟鐢ㄦ椂杩涜鑺傛祦澶勭悊銆?/p>

涓嬮潰鏄皝瑁?axios 瀹炰緥鐨勭ず渚嬩唬鐮侊細

import axios from 'axios'

function request(config) {
  const instance = axios.create({
    baseURL: 'http://localhost:3000/api',
    timeout: 10000
  })

  // 鑺傛祦
  let lastTime = new Date().getTime()
  instance.interceptors.request.use(config => {
    const nowTime = new Date().getTime()
    if (nowTime - lastTime < 1000) {
      return Promise.reject(new Error('鑺傛祦澶勭悊涓紝绋嶅悗鍐嶈瘯'))
    }
    lastTime = nowTime
    return config
  }, error => {
    console.log(error)
    return Promise.reject(error)
  })

  instance.interceptors.response.use(response => {
    return response
  }, error => {
    console.log(error)
    return Promise.reject(error)
  })

  return instance(config)
}

export default request

鍦ㄤ笂杩颁唬鐮佷腑锛屾垜浠垱寤轰簡涓€涓?axios 瀹炰緥锛屽苟瀵硅瀹炰緥杩涜浜嗚妭娴佸鐞嗐€傚叾涓紝lastTime 鍙橀噺鐢ㄤ簬淇濆瓨涓婁竴娆¤姹傜殑鏃堕棿銆傚湪鎷︽埅鍣ㄤ腑锛屾垜浠€氳繃姣旇緝褰撳墠鏃堕棿鍜屼笂涓€娆¤姹傜殑鏃堕棿锛屾潵鍐冲畾鏄惁杩涜鑺傛祦澶勭悊銆?/p>

涓€涓畬鏁寸ず渚?/h2>

涓嬮潰鏄竴涓畬鏁寸殑绀轰緥浠ｇ爜锛屽寘鎷簡闃叉姈鍜岃妭娴侊細

import axios from 'axios'

function request(config) {
  const instance = axios.create({
    baseURL: 'http://localhost:3000/api',
    timeout: 10000
  })

// 闃叉姈
const debounceTokenCancel = new Map()
instance.interceptors.request.use(config => {
  const tokenKey = `${config.method}-${config.url}`
  const cancel = debounceTokenCancel.get(tokenKey)
  if (cancel) {
    cancel()
  }
  return new Promise(resolve => {
    const timer = setTimeout(() => {
      clearTimeout(timer)
      resolve(config)
    }, 800)
    debounceTokenCancel.set(tokenKey, () => {
      clearTimeout(timer)
      resolve(new Error('鍙栨秷璇锋眰'))
    })
  })
}, error => {
  console.log(error)
  return Promise.reject(error)
})

instance.interceptors.response.use(response => {
  return response
}, error => {
  console.log(error)
  return Promise.reject(error)
})

// 鑺傛祦
let lastTime = new Date().getTime()
instance.interceptors.request.use(config => {
  const nowTime = new Date().getTime()
  if (nowTime - lastTime < 1000) {
    return Promise.reject(new Error('鑺傛祦澶勭悊涓紝绋嶅悗鍐嶈瘯'))
  }
  lastTime = nowTime
  return config
}, error => {
  console.log(error)
  return Promise.reject(error)
})

return instance(config)
}

export default request

鍦ㄤ笂杩颁唬鐮佷腑锛屾垜浠垱寤轰簡涓€涓?axios 瀹炰緥锛屽苟瀵硅瀹炰緥杩涜浜嗛槻鎶栧拰鑺傛祦澶勭悊銆傚叾涓紝debounceTokenCancel 鍙橀噺鐢ㄤ簬淇濆瓨姣忎釜璇锋眰鐨勮鏃跺櫒瀵硅薄锛沴astTime 鍙橀噺鐢ㄤ簬淇濆瓨涓婁竴娆¤姹傜殑鏃堕棿銆?/p>

缁撹

鍦ㄥ墠绔紑鍙戜腑锛岄€氳繃瀵规帴鍙ｈ繘琛岄槻鎶栧拰鑺傛祦澶勭悊鍙互鏈夋晥鍑忓皯缃戠粶璇锋眰鍜屾湇鍔＄璐熻浇锛屾彁鍗囩綉绔欐€ц兘銆傛湰鏂囦腑锛屾垜浠粙缁嶄簡濡備綍浣跨敤 Vue 鍜?Axios 瀵规帴鍙ｈ繘琛岄槻鎶栧拰鑺傛祦澶勭悊锛屽苟璇︾粏浠嬬粛浜嗗疄鐜板師鐞嗕互鍙婃敞鎰忎簨椤广€傚笇鏈涜繖绡囨枃绔犲彲浠ュ府鍔╀綘鏇村ソ鍦板畬鎴愬紑鍙戝伐浣溿€?/p>

浣滆€咃細饾懞饾拤饾拪饾拤饾懐饾挃饾拪饾拸饾拡
閾炬帴锛歨ttps://juejin.cn/post/7225133152490160187
鏉ユ簮锛氱█鍦熸帢閲?br> 钁椾綔鏉冨綊浣滆€呮墍鏈夈€傚晢涓氳浆杞借鑱旂郴浣滆€呰幏寰楁巿鏉冿紝闈炲晢涓氳浆杞借娉ㄦ槑鍑哄銆?/p>